/**************************************************************

	Script		: CoolAjaxBox
	Version		: 1.0
	Authors		: Marcin Olszowy

**************************************************************/

var CoolAjaxBox = new Class({
							
	image : {width:0,height:0},
	closeiconHover : null,
	closeiconDown : null,
	closeiconOut : null,
	sourceURL : null,
	
	initialize: function(args) {
		this.elCanvas = $('canvas');
		if($chk(args)) {
			if($chk(args.url)) {
				this.url = args.url;	
			}
			if($chk(args.params)) {
				this.params = args.params;
			}
		} else {
			return false;	
		}
	},
	
	request: function() {
		this.calculateCanvasSize();
		this.buildHTML();
		this.loadAjaxOverlay();
		this.displayAjaxLoader();
		this.decideAction()
	},
	
	decideAction: function() {
		this.params.imagename = this.url;
		new Request.JSON({
			method: 'post',
			url: '_ajax/coolbox.isimage.php',
			data: this.params,
			instance: this,
			onFailure: function(exc) {
				this.instance.byebye();
				alert(Localization.network_error);
			},
			onError: function() {
				this.instance.byebye();
				alert(Localization.network_error);
			},
			onSuccess: function(o) {
				if(o.isimage == 1) {
					this.instance.image.width = o.width;
					this.instance.image.height = o.height;
					this.instance.loadImage();
				} else {
					this.instance.loadHTML();
				}
			}
		}).send();	
	},
	
	buildHTML: function() {
		/*
		original:
		<div id="ajaxoverlay"></div>
        <div id="ajaxloader" align="center"><table border="0"><tr><td align="center" valign="middle"><img src="images/cool-ajax-loader.gif" align="center"/></td></tr></table></div>
        <div id="ajaxinterfacecontainer" align="center">
            <table id="draggable" style="position:relative;" border="0"><tr><td><div id="ajaxinterface"></div></td></tr></table>
        </div>
		--*/
		this.ajaxoverlay = new Element('div').setProperty('id','ajaxoverlay').injectInside($('body'));
		this.ajaxloader = new Element('div').setProperties({'id':'ajaxloader','align':'center'});
		this.ajaxloader.set('html','<table border="0"><tr><td align="center" valign="middle" style="width:75px; height:75px; background-color:#000000; border:1px solid #fcbf2c;"><img src="images/cool-ajax-loader.gif" align="center"/></td></tr></table>').injectInside($('body'));
		this.ajaxinterfacecontainer = new Element('div').setProperties({'id':'ajaxinterfacecontainer','align':'center'});
		this.ajaxinterfacecontainer.set('html','<table id="draggable" border="0" cellpadding="0" cellspacing="0" style="padding:0px;"><tr><td id="ajaxtitle" align="left" style="padding:7px; font-weight:bold; font-family: Segoe UI, Arial, Helvetica, sans-serif; font-size:12px;"></td><td valign="middle" align="right" style="padding:7px;"><img id="coolajaxcloseicon" src="images/close_ajaxbox_default.png" align="center" width="14" height="14" style="cursor:pointer;" onclick="UI.CAB.byebye();"/></td></tr><tr><td colspan="2" style="padding:7px; padding-top:0px;"><div id="ajaxinterface" align="left"></div></td></tr></table>').injectInside($('body'))
		this.ajaxinterface = $('ajaxinterface');
		this.ajaxtitle = $('ajaxtitle');
		this.draggable = $('draggable');
		
		UI.CAB.closeiconHover = new Asset.image('images/close_ajaxbox_mouseover.png', {
			id: 'coolajaxcloseicon', 
			width: 14,
			height: 14
		});
		UI.CAB.closeiconOut = new Asset.image('images/close_ajaxbox_default.png', {
			id: 'coolajaxcloseicon', 
			width: 14,
			height: 14
		});
		UI.CAB.closeiconDown = new Asset.image('images/close_ajaxbox_mousedown.png', {
			id: 'coolajaxcloseicon', 
			width: 14,
			height: 14
		});
		
		$('coolajaxcloseicon').addEvent('mousedown', function() {
			$('coolajaxcloseicon').setProperty('src','images/close_ajaxbox_mousedown.png');
	    });
		$('coolajaxcloseicon').addEvent('mouseover', function() {
			$('coolajaxcloseicon').setProperty('src','images/close_ajaxbox_mouseover.png');						  
	    });
		$('coolajaxcloseicon').addEvent('mouseout', function() {
			$('coolajaxcloseicon').setProperty('src','images/close_ajaxbox_default.png');						  
	    });
		

	},
	
	loadImage: function() {
		UI.CAB.image = new Asset.image('images/' + this.params.imagename, {
			id: 'coolajaxboximage', 
			width: this.image.width,
			height: this.image.height,
			title: this.params.title, 
			alt: this.params.title,
			onload: function() {
				UI.CAB.injectImage();
				UI.CAB.setLightboxURL();
			}
		});
	},
	
	injectImage: function() {
		this.ajaxinterface.setStyle('width','285px');
		this.ajaxinterface.setStyle('width','75px');
		this.ajaxinterface.setStyle('background-color','#111');
		this.ajaxinterface.setStyle('border-color','#111');
		this.ajaxinterface.setStyle('padding','0px');
		this.ajaxinterface.setStyle('padding','0px');
		this.ajaxinterface.setStyle('border-color','#111');
		this.ajaxtitle.setStyle('color','#ddd');
		this.ajaxtitle.set('text',this.params.title);
		this.draggable.setStyle('background-color','#111');
		this.draggable.setStyle('border-color','#000');
		this.draggable.setStyle('border-width','1px');
		this.draggable.setStyle('border-style','solid');
		this.hideAjaxLoader();
		this.loadAjaxInterface();
		//width transition
		new Fx.Tween(this.ajaxinterface, {
			'duration':350,
			transition: 'back:out',
			onComplete: function() {
				new Fx.Tween(UI.CAB.ajaxinterface, {
					'duration':350,
					transition: 'back:out',
					onComplete: function() {
						UI.CAB.image.setStyle('opacity',0);
						UI.CAB.image.injectInside(UI.CAB.ajaxinterface);
						new Fx.Tween(UI.CAB.image, {duration:1000}).start('opacity',1);
					}
				}).start('height',75,UI.CAB.image.height);
			}
		}).start('width',285,UI.CAB.image.width);
		
		//height transition
		
		//oncomplete:
		//this.makeDragable();


	},
	
	loadHTML: function() {
		new Request.HTML({
			method: 'post',
			url: '_ajax/'+this.url,
			data: this.params,
			instance: this,
			onFailure: function(exc) {
				this.instance.byebye();
				alert(Localization.network_error);
			},
			onError: function() {
				this.instance.byebye();
				alert(Localization.network_error);
			},
			onSuccess: function(responseTree, responseElements, responseHTML, responseJavaScript) {
				if($chk(this.instance.params.title)) {
					this.instance.ajaxtitle.set('text',this.instance.params.title);	
				} 
				this.instance.ajaxinterface.set('html',responseHTML);					
				this.instance.hideAjaxLoader();
				this.instance.loadAjaxInterface();
				//this.instance.makeDragable();
				this.instance.setLightboxURL();

			}
		}).send();	
	},
	
	makeDragable: function() {
		if(Browser.Engine.gecko) {
			var cabdrag = new Drag('draggable', {handle:'draghandle'});
		}
	},
	
	calculateCanvasSize: function () {
		//fullscreenElement = document.getElementById("canvas");
		var htmlheight = document.body.parentNode.scrollHeight;  
		var windowheight = window.innerHeight;
		if ( htmlheight < windowheight ) { 
			$(document.body).setStyle('height', windowheight + 'px'); 
			this.elCanvas.setStyle('height', windowheight + 'px'); 
		} else { 
			$(document.body).setStyle('height', htmlheight + 'px'); 
			this.elCanvas.setStyle('height', htmlheight + 'px'); 
		}
		this.elCanvas.setStyle('width', '100%');
	},
	
	adjustOverlay: function() {
		if(this.ajaxoverlay.getStyle('height').toInt() < document.body.parentNode.scrollHeight) {
			this.ajaxoverlay.setStyle('height',document.body.parentNode.scrollHeight);
		}		
	},
	
	//displays the ajax loading status image
	displayAjaxLoader: function() {
		this.ajaxloader.setStyle('opacity',0.6);
		this.ajaxloader.setStyle('width', this.elCanvas.getStyle('width'));
		if(window.getScroll().y > 200) {
			this.ajaxloader.setStyle('top', (window.getScroll().y+50));
		} else {
			this.ajaxloader.setStyle('top', 220);
		}
	},
	
	hideAjaxLoader: function() {
		this.ajaxloader.setStyle('opacity',0);
		this.ajaxloader.setStyle('width', '0px');
	},
	
	loadAjaxOverlay: function() {
		this.ajaxoverlay.setStyle('opacity',0.85);
		this.ajaxoverlay.setStyle('height', this.elCanvas.getStyle('height'));
		this.ajaxoverlay.setStyle('width', this.elCanvas.getStyle('width'));
	},
	
	loadAjaxInterface: function() {
		var fadeFx = new Fx.Tween(this.ajaxinterface, {'duration':700, 'link':'chain'});
		fadeFx.start('opacity',0,1);
		var fadeFx = new Fx.Tween(this.ajaxinterfacecontainer, {'duration':700, 'link':'chain'});
		fadeFx.start('opacity',0,1);
		
		if(window.getScroll().y > 50) {
			this.ajaxinterfacecontainer.setStyle('top', (window.getScroll().y + 20));
		} else {
			this.ajaxinterfacecontainer.setStyle('top', 70);
		}
		
		this.adjustOverlay();
	},
	
	setLightboxURL: function() {
		
		/*//alert(location.href.length-1);
		//alert(location.href);
		//alert(location.href.substring(location.href,0,(location.href.length-1)));
		//alert(document.location.hash);
		//remove terminal # from location.href
		if(location.href.charCodeAt((location.href.length-1)) == 35) {
			this.sourceURL = location.href.substring(0,(location.href.length-1));
			//alert(this.sourceURL + '1');
		} else {
			this.sourceURL = location.href;
			//alert(this.sourceURL + '0');
		}
		
		var hash = '#/' + this.url + '?' + this.params.title;
		window.location.replace(location.href + hash);*/
	},
	
	unsetLightboxURL: function() {
		//window.location.replace(this.sourceURL + '#');
	},
	
	byebye: function() {
		this.ajaxoverlay.dispose();
		this.ajaxloader.dispose();
		this.ajaxinterfacecontainer.dispose();
		this.unsetLightboxURL();
	}
	
});