/******************************************************************/
/*                        MOOdalBox 1.2.1                         */
/* A modal box (inline popup), used to display remote content     */
/* loaded using AJAX, written for the mootools framework          */
/*         by Razvan Brates, razvan [at] e-magine.ro              */
/******************************************************************/
/*               http://www.e-magine.ro/moodalbox                 */
/******************************************************************/
/*                                                                */
/* MIT style license:                                             */
/* http://en.wikipedia.org/wiki/MIT_License                       */
/*                                                                */
/* mootools found at:                                             */
/* http://mootools.net/                                           */
/*                                                                */
/* Original code based on "Slimbox", by Christophe Beyls:         */
/* http://www.digitalia.be/software/slimbox                       */
/******************************************************************/

// Constants defined here can be changed for easy config / translation
// (defined as vars, because of MSIE's lack of support for const)

var _ERROR_MESSAGE = "Oops.. there was a problem with your request.<br /><br />" +
					"Please try again.<br /><br />" +
					"<em>Click anywhere to close.</em>"; // the error message displayed when the request has a problem
var _RESIZE_DURATION 		= 400; 		// Duration of height and width resizing (ms)
var _INITIAL_WIDTH			= 50;		// Initial width of the box (px)
var _INITIAL_HEIGHT			= 50;		// Initial height of the box (px)
var _CONTENTS_WIDTH 		= 0;		// Actual width of the box (px)
var _CONTENTS_HEIGHT		= 0;		// Actual height of the box (px)
var _DEF_CONTENTS_WIDTH		= 0;		// Default width of the box (px) - used for resetting when a different setting was used
var _DEF_CONTENTS_HEIGHT	= 0;		// Default height of the box (px) - used for resetting when a different setting was used
var _ANIMATE_CAPTION		= true;		// Enable/Disable caption animation
var _EVAL_SCRIPTS			= false;	// Option to evaluate scripts in the response text
var _EVAL_RESPONSE			= false;	// Option to evaluate the whole response text
var _Container_ID           = '';
var _CHANGE_POSITION        = 1;
var _PAGE_NAME              = '';
var _RESUBMIT_PAGE_NAME     = '';
var _IMAGE_NAME             = '';
var _IMAGE_CAPTION          = '';       // Added by JS
var _AUTO_HEIGHT            = false;
//debugger;
// The MOOdalBox object in its beauty
var MoodalBox = {
	
	// init the MOOdalBox
	modal: function (options) {
		
		// init default options
		this.options = Object.extend({
		    ContainerId:        _Container_ID,
		    changePosition:     _CHANGE_POSITION,
		    pageName:           _PAGE_NAME,
		    ResubmitpageName:   _RESUBMIT_PAGE_NAME,
		    imgName:            _IMAGE_NAME,
		    imgCaption:         _IMAGE_CAPTION, //Added by JS
		    autoHeight:         _AUTO_HEIGHT,
			resizeDuration: 	_RESIZE_DURATION,
			initialWidth: 		_INITIAL_WIDTH,	
			initialHeight: 		_INITIAL_HEIGHT,
			contentsWidth: 		_CONTENTS_WIDTH,
			contentsHeight: 	_CONTENTS_HEIGHT,
			defContentsWidth: 	_DEF_CONTENTS_WIDTH,
			defContentsHeight: 	_DEF_CONTENTS_HEIGHT,
			animateCaption: 	_ANIMATE_CAPTION,
			evalScripts: 		_EVAL_SCRIPTS,
			evalResponse: 		_EVAL_RESPONSE
		}, options || {});
				
		// scan anchors for those opening a MOOdalBox
		this.anchors = [];
		$A($$('a')).each(function(el){
			// we use a regexp to check for links that 
			// have a rel attribute starting with "moodalbox"
			if(el.rel && el.href && el.rel.test('^moodalbox', 'i')) {
				el.onclick = this.click.pass(el, this);
				this.anchors.push(el);
			}
		}, this);
		
		// add event listeners
		this.eventKeyDown = this.keyboardListener.bindWithEvent(this);
		this.eventPosition = this.position.bind(this);
		
		// init the HTML elements
		// the overlay (clickable to close)
		this.overlay = new Element('div').setProperty('id', 'mb_overlay').injectInside(document.body);
		// the center element
		this.center = new Element('div').setProperty('id', 'mb_center').setStyles({width: this.options.initialWidth+'px', height: this.options.initialHeight+'px', marginLeft: '-'+(this.options.initialWidth/2)+'px', display: 'none'}).injectInside(document.body);
		
		
		// the actual page contents
		
		
		this.contents = new Element('div').setProperty('id', 'moocontent').injectInside(this.center);   
		
		if (options.ContainerId)
        {
       
            if (options.pageName)
		    {
		        $('PageName').innerHTML = options.pageName;
		    }
		    if (options.ResubmitpageName)
		    {
		         //$('ResubmitPageName').innerHTML = options.ResubmitpageName;
		    }
		    if (options.imgName) // Modified by JS
		    {
		        var str;
		        var gap = 3;
		        var infoBoxHeight = 30;
		        
		        this.options.contentsWidth += (gap * 2);
		        this.options.contentsHeight += ((gap * 2) + infoBoxHeight);
                
                str  = '<div style="position:relative;height:' + infoBoxHeight + 'px;vertical-align:middle">' +
                           '<div style="font-weight:bold;float:left;' + 
                               'margin:' + gap + 'px;' + 
                               'height:' + (infoBoxHeight - gap) + 'px;' + 
                               'width:' + (this.options.contentsWidth - [window.ie6 ? (gap*6) : (gap*4)] - (infoBoxHeight - gap)) + 'px;' + 
                               'font-size:medium;' +
                               'overflow:hidden;">' +
                               [new String(options.imgCaption).toLowerCase() == "click to add title" || new String(options.imgCaption).toLowerCase() == "title" ? "Untitled" : options.imgCaption] + 
                           '</div>' + 
                           
                           '<a href="" style="text-decoration:none;">' +
                           '<input id="closectl" type="image" src="../_images/buttons/popup_close.gif" runat="server" style="position:relative;float:right;' + 
                               'background-color:#FFFFFF;' +
                               'margin:' + [window.ie6 ? (gap-1) : gap] + 'px;' +
                               'padding:5px 4px 4px 4px;' +
                               'height:' + 16 + 'px;' + 
                               'width:' + 16 + 'px;' + 
                               '" onclick="javascript:MoodalBox.close();return false;">' + 
                           '</a></input>' + 
                       '</div>';
                       
                str += '<img src=' + options.imgName + ' style="display:block;' + 
                           'margin-left:' + gap + 'px;' + 
                           'margin-top:' + [window.ie6 ? (gap-2) : gap]+ 'px;">' + 
                       '</img>';
                 
                $(options.ContainerId).innerHTML = str;
		    }
		    this.contents.innerHTML = document.getElementById(this.options.ContainerId).innerHTML;
	    }	
		
		this.bottom = new Element('div').setProperty('id', 'mb_bottom').setStyle('display', 'none').injectInside(document.body);
		this.closelink = new Element('a').setProperties({id: 'mb_close_link', href: '#'}).injectInside(this.bottom);
		this.caption = new Element('div').setProperty('id', 'mb_caption').injectInside(this.bottom);
		new Element('div').setStyle('clear', 'both').injectInside(this.bottom);
		
		this.error = new Element('div').setProperty('id', 'mb_error').setHTML(_ERROR_MESSAGE);
		
		// attach the close event to the close button / the overlay
		this.closelink.onclick = this.close.bind(this);
		
		// init the effects
		var nextEffect = this.nextEffect.bind(this);
		this.fx = {
			overlay: 	this.overlay.effect('opacity', { duration: 100 }).hide(),
			resize: 	this.center.effects({ duration: this.options.resizeDuration, onComplete: nextEffect }),
			contents: 	this.contents.effect('opacity', { duration: 100, onComplete: nextEffect }),
			bottom: 	this.bottom.effects({ duration: 50, onComplete: nextEffect })
		};
				
		this.fx.contents.custom(0,0);
		
	},
	
	  click: function(){
	  
		return this.open();
	},

	open: function() {	
		this.position();
		this.setup(true);		
		this.top = (Window.getScrollTop() + (Window.getHeight() - this.options.contentsHeight)/2);
	    this.left = (Window.getWidth() / 2) + Window.getScrollLeft(); // by JS
	    //this.left = (Window.getScrollLeft() + (Window.getWidth() - this.options.initialWidth)/1.8);
		this.center.setStyles({top: this.top+'px', display: ''});
		this.center.setStyles({left: this.left+'px', display: ''});	
		this.fx.overlay.custom(0.4);
			
		return this.loadContents();
	},

	position: function() {
		this.overlay.setStyles({top: Window.getScrollTop()+'px', height: Window.getHeight()+'px'});
		this.overlay.setStyles({left: Window.getScrollLeft()+'px', width: Window.getWidth()+'px'});			
	},

	setup: function(open) {
		var elements = $A($$('object'));
		elements.extend($$(window.ActiveXObject ? 'select' : 'embed'));
		elements.each(function(el){ el.style.visibility = open ? 'hidden' : ''; });
		var fn = open ? 'addEvent' : 'removeEvent';
		window[fn]('scroll', this.eventPosition)[fn]('resize', this.eventPosition);
		document[fn]('keydown', this.eventKeyDown);
		this.step = 0;
	},
	
	loadContents: function() {		
		if(this.step) return false;
		this.step = 1;
		
		this.bottom.setStyles({opacity: '0', height: '0px', display: 'none'});
		this.center.className = 'mb_loading';
		
		this.fx.contents.hide();
		
		
		// AJAX call here
		var nextEffect = this.nextEffect.bind(this);
		
		this.contents.innerHTML = $(this.options.ContainerId).innerHTML;		
		
		//---------Scroll position
	    if(this.options.changePosition)
	    {
	      var height = this.options.contentsHeight;
	      var width =this.options.initialWidth;
	       
            window.onresize = function (e) { 
                 
                if($('mb_center')!= null)
                { 
                    var topDim , leftDim;
                    
                    topDim = (Window.getScrollTop() + (Window.getHeight() - height)/2);
                    $('mb_center').setStyles({top: topDim+'px', display: ''});
                    
                    leftDim = (Window.getWidth() / 2) + Window.getScrollLeft();
                    $('mb_center').setStyles({left: leftDim+'px', display: ''});
                 }     
            }
        }
				
		return false;
	},
	
	ajaxFailure: function (){
		this.contents.setHTML('');
		this.error.clone().injectInside(this.contents);
		this.nextEffect();
		this.center.setStyle('cursor', 'pointer');
		this.bottom.setStyle('cursor', 'pointer');
		this.center.onclick = this.bottom.onclick = this.close.bind(this);		
	},
	
	nextEffect: function() {	
		switch(this.step++) {
		case 1:
				
			this.center.className = '';
			this.center.setStyle('cursor', 'default');
			this.bottom.setStyle('cursor', 'default');
			this.center.onclick = this.bottom.onclick = '';
			this.caption.setHTML(this.title);
			
			if(this.options.autoHeight)
			{
			    this.contents.setStyles ({width: this.options.contentsWidth + "px", minHeight: this.options.contentsHeight + "px", height: this.options.contentsHeight + "px"});
			    this.contents.addClass('autoheight');
			}
			else
			{
			    this.contents.setStyles ({width: this.options.contentsWidth + "px", height: this.options.contentsHeight + "px"});
            }
			if(this.center.clientHeight != this.contents.offsetHeight) {
				this.fx.resize.custom({height: [this.center.clientHeight, this.contents.offsetHeight]});
				break;
			}
			this.step++;
					
		case 2:
		//alert("2");
			if(this.center.clientWidth != this.contents.offsetWidth) {
				this.fx.resize.custom({width: [this.center.clientWidth, this.contents.offsetWidth], marginLeft: [-this.center.clientWidth/2, -this.contents.offsetWidth/2]});
				break;
			}
			this.step++;
		
		case 3:
			this.fx.contents.custom(0,1);
			break;
		
		case 4:
		
			if(this.options.animateCaption) {
				this.fx.bottom.custom({opacity: [0, 1], height: [0, this.bottom.scrollHeight]});
				break;
			}			

		case 5:
		
			this.step = 0;
		}
	},
	
	
	keyboardListener: function(event) {
	if(event.key == 'tab'){
		  event.stop();  
		}
		if($('ctl00_Content_savectl') != null)
		{
		    document.getElementById('ctl00_Content_savectl').disabled=true;
		} 	
	},
	
	close: function() { 
	    if (this.step < 0) return;
		this.step = -1;
		
		for (var f in this.fx) this.fx[f].stop();
		this.center.style.display  = 'none';
		this.fx.overlay.chain(this.setup.pass(false, this)).start(0);
		window.onscroll=null;		 
		setTimeout("document.body.removeChild($('mb_center'));document.body.removeChild($('mb_bottom'));document.body.removeChild($('mb_overlay'));",400)
		
		if($('ctl00_Content_savectl') != null)
		{
		    document.getElementById('ctl00_Content_savectl').disabled=false;
		}
		
		return false;
	    
		
	}
		
};

// startup
//Window.onDomReady(MOOdalBox.init.bind(MOOdalBox));

//Added By Balasaraswathi
function PositionMsg()
{

   if($('this.contents')!=null)
   {
	new Fx.Styles('this.contents', {duration: 75, transition: Fx.Transitions.sineInOut}).start({
		'left':(window.getScrollLeft() + (window.getWidth() - 0)/3)+'px',
		'top':(window.getScrollTop() + (window.getHeight() - 0)/3)+'px'});
	}    
    
}
 
