var SimpleBox = new MK111.Class({
	options: {
		width: 		300,
		height: 	200,
		paddingleft:1,
		paddingtop:1,
		opacity:	'0.8',
		btnTitle:	"Ok",
		closeBtn:	null,
		boxTitle:	"messageBox",
		boxClass:	'mainBox',
		id:			'myID',
		fadeSpeed:	500,
		box:		null,
		addContentID:null,
		addContent:  null,
		boxTxtColor: '#000',
		isVisible:	false,
		isDrag:		true,
		position:     'c'
	},
		
	initialize: function(options){
		this.isVisible = false;
		if(options['isDrag']) this.isDrag = options['isDrag'];
		if(options['width']) this.width = options['width'];
		if(options['height']) this.height = options['height'];
		if(options['paddingleft']) this.paddingleft = options['paddingleft'];
		if(options['paddingtop']) this.paddingtop = options['paddingtop'];
		if(options['opacity']) this.opacity = options['opacity'];
		if(options['btnTitle']) this.btnTitle = options['btnTitle'];
		if(options['boxTitle']) this.boxTitle = options['boxTitle'];
		if(options['boxClass']) this.boxClass = options['boxClass'];
		if(options['boxTxtColor']) this.boxTxtColor = options['boxTxtColor'];
		if(options['fadeSpeed']) this.fadeSpeed = options['fadeSpeed'];
		if(options['id']) this.id = options['id'];
		if(options['closeBtn']) this.closeBtn = MK111.$(options['closeBtn']);
		if(options['addContentID']) this.addContentID = options['addContentID'];
		if(options['position']) this.position = options['position'];
		
		if(options['addContentID']) {
			this.addContent = MK111.$(this.addContentID).innerHTML;
			MK111.$(this.addContentID).setStyle('visibility','hidden');
			MK111.$(this.addContentID).remove();
		}		
		
		this.createBox();	
	},
		
	createBox: function(){
		this.box = new MK111.Element('div');
		this.box.addClass(this.boxClass);
	},
	
	clickClose: function(){
		MK111.$(this.box).effect('opacity',{ wait:true, duration:this.fadeSpeed, transition:MK111.Fx.Transitions.linear }).chain(function(){
		}).start(this.opacity,0);
			this.isVisible = false;
		},
		
		fadeOut: function(){
			if(this.isVisible){
				MK111.$(this.box).effect('opacity',{ wait:true, duration:this.fadeSpeed, transition:MK111.Fx.Transitions.linear }).chain(function(){
			}).start(this.opacity,0);
			this.isVisible = false;
		}
			
	},
		
	fadeIn: function(){	
		if (document.documentElement && document.documentElement.clientWidth) {
			theWidth=document.documentElement.clientWidth;
		}else if (document.body) {
			theWidth=document.body.clientWidth;
		}
		if (window.innerHeight) {
			theHeight=window.innerHeight;
		}else if (document.documentElement && document.documentElement.clientHeight) {
			theHeight=document.documentElement.clientHeight;
		}else if (document.body) {
			theHeight=document.body.clientHeight;
		}
		var top = window.getScrollTop();
		
		// position
		if(this.position=='tl'){
		var boxTop =  0;
        var boxLeft = 0;
		}
		else if(this.position=='tc') {
		var boxTop =  0;        
        var boxLeft = (theWidth - this.width) / 2;
		}
		else if(this.position=='tr') {
		var boxTop = 0;        
        var boxLeft = (theWidth - this.width - 25);
		}
		else if(this.position=='l') {
		var boxTop =  (theHeight - this.height) / 2 ;
        boxTop = (boxTop + top );        
        var boxLeft = 0;
		}
		else if(this.position=='c') {
		var boxTop =  (theHeight - this.height) / 2 ;
        boxTop = (boxTop + top );        
        var boxLeft = (theWidth - this.width) / 2;
		}
		else if(this.position=='r') {
		var boxTop =  (theHeight - this.height) / 2 ;
        boxTop = (boxTop + top );        
        var boxLeft = (theWidth - this.width - 25);
		}
		else if(this.position=='bl') {
		var boxTop =  (theHeight - this.height);
        boxTop = (boxTop + top );        
        var boxLeft = 0;
		}
		else if(this.position=='bc') {
		var boxTop =  (theHeight - this.height);
        boxTop = (boxTop + top );        
        var boxLeft = (theWidth - this.width) / 2;
		}
		else if(this.position=='br') {
		var boxTop =  (theHeight - this.height);
        boxTop = (boxTop + top );        
        var boxLeft = (theWidth - this.width - 25);
		}
		else{
		var boxTop =  (theHeight - this.height) / 2 ;
        boxTop = (boxTop + top );        
        var boxLeft = (theWidth - this.width) / 2;
		}
		
        this.box.setStyle('top',boxTop + this.paddingtop);
		this.box.setStyle('left',boxLeft + this.paddingleft);
		this.box.setStyle('position','absolute');
		this.box.setStyle('width',this.width);
		this.box.setStyle('height',this.height);
		this.box.setStyle('opacity',this.opacity);
		this.box.setStyle('cursor','move');
		this.box.setStyle('z-index','999990000');
		this.box.setAttribute('id', this.id);
		this.box.setStyle('visibility','hidden');
		this.box.injectInside(document.body);
		if(this.isVisible == false){
			this.box.effect('opacity',{ wait:true, duration: this.fadeSpeed, transition: MK111.Fx.Transitions.linear }).start(0,this.opacity);
			this.addHT();
			this.isVisible = true;
		}
	},
		
	addHT: function(){
		this.closeBtn = new MK111.Element('button', {
			styles: {
				'border': 'none',
				'background-image':'url(/DesktopModules/Markit.FancyPopup/Images/bg_button.gif)',
				'color':'#666',
				'position':'absolute',
				'bottom':'3px',
				'right':'3px',
				'width':'44px',
				'height':'19px',
				'font-size':'10px',
				'font-family':'arial',
				'cursor':'pointer'
			}				
		})
		
	  var width = this.width.toInt() + 5;
		if(window.ie){
			var titleBar = new MK111.Element('div', {
				styles: {
					'width' : 				width,
					'height': 				'auto',
					'background-repeat':	'repeat-x',
					'background-position':	'right top',
					'line-height':			'20px',
					'padding':				'5px 5px 5px 10px',
					'position':				'absolute',
					'clear':				'both',
					'margin-bottom':		'10px',
					'top':					'0px',
					'left':					'0px',
					'color':				'#eee'
				}
		  })
		}else{
			var titleBar = new MK111.Element('div', {
				styles: {
					'width' : 				width,
					'height': 				'auto',
					'background-repeat':	'repeat-x',
					'background-position':	'right top',
					'line-height':			'auto',
					'padding':				'5px 5px 5px 10px',
					'position':				'absolute',
					'clear':				'both',
					'margin-bottom':		'10px',
					'top':					'0px',
					'left':					'0px',
					'color':				'#eee'


				}
			})
		}
		
  	MK111.$(titleBar).innerHTML = this.boxTitle;
	
		var insideDiv = new MK111.Element('div',{
			styles: {
				'padding':'10px'
			}
		});
			
		insideDiv.setAttribute('id','myContent');
		this.box.innerHTML = "";
		insideDiv.injectInside(this.box);
	
		insideDiv.innerHTML = this.addContent;	
		this.closeBtn.innerHTML = this.btnTitle;	
		MK111.$(this.closeBtn).addEvent('click',this.clickClose.bindWithEvent(this));			
		titleBar.injectInside(this.box);
		this.closeBtn.injectInside(this.box);
			
		if(this.isDrag == 'true'){
			this.box.makeDraggable();
		}
	}
});

SimpleBox.implement(new MK111.Options, new MK111.Events);



// Markit Custom Code
///////////////////////////////////////////////////////////////////////////////
SimpleBoxControler = {
	_instance : []
	
	,
	run : function($data){
		if(typeof($data) != 'object' )return;
		if(!this._instance[$data['id']]){
			this._instance[$data['id']] = new SimpleBox({ 
				  width:$data['width'],
				 height:$data['height'],
				 paddingleft:$data['paddingleft']+1,
				 paddingtop:$data['paddingtop']+1,
				 btnTitle:$data['btnTitle'],
				 closeBtn:'myBtn',
				 boxClass:$data['boxClass'],
				 id:'376',
				 fadeSpeed:$data['fadeSpeed'],
				 opacity:$data['opacity'],
				 addContentID:$data['id'],
				 boxTitle:$data['boxTitle'],
				 position:$data['position'],
				 isDrag:String($data['isDrag'])
				 
			 });
		}//end if
		if(!this._instance[$data['id']].isVisible)this._instance[$data['id']].fadeIn();
	}//end func
	
	
}//end class