//modal_box.js
//ModalBox class

var ModalBox = Class.create();

ModalBox.prototype = {
	initialize: function(element, options){
			this.element = $(element);
			this.options = {
				 width: '620px'
				,height: '420px'
				,url:''
				,element:''
				,post:''
				,handler:''
			}
			Object.extend( this.options, options || {} );
			this.url = 	this.options.url;
			this.post = this.options.post;
			this.contentElement = 	$(this.options.element);
			this.width = this.options.width;
			this.height = this.options.height;
				//	alert(this.height + "--" + this.width);
		}
	,_render: function(){
		//this.element.setStyle({backgroundColor: 'transparent',border:'#005A68 1px dotted',height:this.height,width:this.width});
		this.element.setStyle({backgroundColor: 'transparent',height:this.height,width:this.width});
		this._getContent();
	}
	,_setOffset: function(){
		var h = $$('body');h = h[0];
		var d = h.getDimensions();
		var o = document.viewport.getScrollOffsets();
		o[1]=0;
		this.element.style.top = ((d.height) / 4)+o[1] + "px";
		this.element.style.left = '180px';((document.viewport.getWidth()) / 6) + "px";
	}
	,setDrag: function(){
		//this.drag = new Draggable(this.element.id, { scroll: window });
	}
	,removeDrag: function(){
		if(this.drag){
			this.drag.destroy();// then destroy it when you don't need it anymore
		}
	}
	,show: function(){
		this._render();
		this._setOffset();
		this.element.setStyle({opacity : 1,visibility: 'visible',height:this.height,width:this.width});
		//this.setDrag();
		//this.element.show();
		this.element.appear();
	}
	,hide: function(){
		this.element.setStyle({opacity : 0,visibility: 'hidden'});
		this.element.hide();
		//this.removeDrag();
	}
	,_getContent: function(){
		//alert('content'+this.url+"=="+this.contentElement);
		if(this.url){
			if(this.url.length > 0){
			//http://alpha4.brickworkscomm.com/web_include/action_handler.php?11493519&test=1
			//&action=view&category=data&component_id=tipshints&id=6
				if(!this.handler){
					this.handler = this._modalHandle.bind(this);
				}				
				//new Ajax.Request( this.url + '?' + ajax_date()+'&'+Object.toQueryString(this.post), { method:'post', postBody:this.post/*, onComplete:this._modalHandle*/,onSuccess:this.handler, onFailure:this._modalError } );
				var a = new Ajax.Request( this.url + '?' + ajax_date()+'&'+Object.toQueryString(this.post), { method:'get'/*, onComplete:function(res){alert(Object.keys(res))}*/,onSuccess:this.handler, onFailure:this._modalError.bind(this) ,onException:this._modalException.bind(this)} );
			}			
		}else if(this.contentElement){
			this.element.update(this.contentElement.innerHTML);			
		}else{
			alert('nothing');//neither a URL or element exist so don't do anything
		}
	}
	,_modalHandle:function(response){
		//alert('here');
		if(navigator.userAgent.match('MSIE')){this.element=$(this.element)};
		this.element.update(response.responseText);
		this.element.setStyle({backgroundColor: 'transparent'});
	}
	,_modalError:function(response){
		alert("fail");
		this.element.update(response.responseText);
	}
	,_modalException:function(response){
		//alert("exception");
		//function(res){alert(Object.keys(res))}
		if(navigator.userAgent.match('MSIE')){this.element=$(this.element)};
		//this.element.update("Not really sure what happened yet");
		//this.element.setStyle({backgroundColor: 'transparent'});
	}
}


var ViewPortShader = Class.create();

ViewPortShader.prototype = {
	initialize: function(element,options){
		this.element = $(element);
		//this.modalBox = new ModalBox('modal_box');
		this.options = {
			modalBox:''
		}
		Object.extend( this.options, options || {} );
		//alert(this.options.modalBox.id);
		this.modalBox = this.options.modalBox;
		
	}
	,show: function(){
		this._setDimensions();
		this.element.setStyle({opacity : .7,visibility: 'visible'});
		this.element.show();
		//this.element.appear();
		this.observe();
		this.modalBox.show();
	}
	,hide: function(){
		this.modalBox.hide();
		this.element.setStyle({opacity : 0,visibility: 'hidden'});
		this.element.hide();
	}
	,_setDimensions: function(){
		var h = $$('body');h = h[0];
		var d = h.getDimensions();
		var o = document.viewport.getScrollOffsets();
		var c = this.element.viewportOffset();
		this.element.style.top = 0-c[1]-400 + "px";
		this.element.style.left = 0-c[0]-300*1.5 + "px";
		//d.width = 916;//document.viewport.getWidth();// < d.width ? document.viewport.getWidth() :
		d.width = 	document.viewport.getWidth() > d.width ? document.viewport.getWidth() : d.width;
		//this.element.setStyle({height:document.viewport.getHeight()+o[1]+'px',width:document.viewport.getWidth()+'px'});
		var hgt = document.viewport.getHeight() > d.height ? document.viewport.getHeight() : d.height;
		this.element.setStyle({height:hgt*1.3+'px',width:d.width*1.5+'px'});
	}
	,observe:function(){
		Event.observe(this.element,'click',this._disapear.bind(this));
	}
	,_disapear: function(event){			
			var e = Event.element(event);
			if(e == $(this.element)){ this.hide(); }
		}
	,_alignModal:function(){
		
	}
}

var ModalWindow = Class.create();

ModalWindow.prototype = {
	initialize: function(modalboxElement,viewportshaderElement,options){
		this.options = {
			  url: ''
			,element: ''
			,post:''
			,handler:''
			,height:400
			,width:400
		}
		Object.extend( this.options, options || {} );

		this.modalbox = new ModalBox(modalboxElement,{url:this.options.url,post:this.options.post,element:this.options.element,height:this.options.height,width:this.options.width,handler:this.options.handler});
		this.viewportshader = new ViewPortShader(viewportshaderElement,{modalBox:this.modalbox});
	}
	,show: function(){
		this.viewportshader.show();
	}
	,hide: function(){
		this.viewportshader.hide();
	}
	,close: function(){
		this.hide()
	}

}
/*
var TipBox = Class.create();

TipBox.prototype = {
	initialize: function(){
			
	}
}*/
//var post = {action:'view',category:'data',component_id:'tipshints',id:6};
//var tipbox = new ModalWindow('modal_box','viewport_shader',{url:'http://alpha4.brickworkscomm.com/web_include/action_handler.php',post:post});