/*
	Class:    	popUp
	Author:   	Gerard Corr
	Website:    http://www.gerardcorr.com
	Version:  	0.0.1
	Date:     	10/10/2009
	Built For:  	MooTools 1.2
*/


var popUp = new Class({

	//implements
	Implements: [Options,Events],

	//options
	options: {
		popupCss: '',
		popupRequest: 'slide',
		popupType: 'iframe',
		popupHeight:300,
		popupWidth:300
	},

	//initialization
	initialize: function(options) {
		//set options
        this.setOptions(options);
		
		//this.fadder = function(){ this.fadeSlide(); this.fireEvent('fadeSlide'); }.bind(this);
        //this.periodical = this.fadder.periodical(this.options.slideDelay);
		this.popup();
	},
	
	
	popup: function(){
		
		var cssVar = this.options.popupCss
		var height = this.options.popupHeight;
		var width = this.options.popupWidth;
		var type = this.options.popupType;
		var request = this.options.popupRequest;
		
		var cssBack = 'popupBack'+cssVar;
		var cssContent = 'popupContent'+cssVar;
		var cssPopup = 'popup'+cssVar;
		var cssClose = 'popupClose'+cssVar;
		
		//-------- check if pop up already exists -----------
		if($defined($(cssBack))) {

			popupback = $(cssBack);
			popup = $(cssPopup);
		}else{
			
		    popupback = new Element('div', {'id': cssBack}).injectInside(document.body);
			popup = new Element('div', {'id': cssPopup}).injectInside(document.body);
		}
		
		//------ setup ----------
		$(cssPopup).setStyle('opacity', 0);
		
		$(cssPopup).innerHTML = '<div id="popupClose'+cssVar+'"><a id="'+cssClose+'" href="javascript:void(0)">Close</a></div><div id="'+cssContent+'">-</div>';
		
		// $(cssBack).destroy(); $(cssPopup).destroy();
		$(cssBack).addEvent('click', function() { $(cssBack).fade(0); $(cssPopup).fade(0); } );
		$(cssClose).addEvent('click', function() { $(cssBack).fade(0); $(cssPopup).fade(0); } );
		
		//$(cssPopup).addEvent('click', function() { $(cssBack).fade(0); $(cssPopup).fade(0); } );
		
		
		//$(cssBack).fade(0);
		//$(cssPopup).fade(0);
		
		//resizepopup();
		$(cssContent).set('text', '');
		
		//----- switch -------------
		switch(type){

			case 'iframe':

				$(cssContent).innerHTML = '<iframe src="'+ request +'" frameborder="0" width="'+width+'" height="'+height+'"></iframe>';
				
				//------ setup ---------
				$(cssPopup).setStyle('width', width);
				$(cssPopup).setStyle('height', height);

				$(popupback).setStyle('height', window.getScrollHeight());
				$(popupback).fade(0.75);
				$(popup).fade(1);

				this.resize();

				break;

			case 'ajax':
				//We can use one Request object many times.
				var req = new Request.HTML({
					url:request, 
					evalScripts: true,
					evalResponse: true,
					update: cssContent,
					onSuccess: function(html) {
						//------ setup ---------
						$(cssPopup).setStyle('width', width);
						$(cssPopup).setStyle('height', height);

						$(popupback).setStyle('height', window.getScrollHeight());
						
						$(cssPopup).setStyle('top',window.getScrollTop());
						
						$(popupback).fade(0.75);
						$(popup).fade(1);
						
						//---------
						
						//alert('done'+window.getScrollTop());	
						

						this.resize();
					},
					//Our request will most likely succeed, but just in case, we'll add an
					//onFailure method which will let the user know what happened.
					onFailure: function() {
						$(cssContent).set('text', 'The request failed.');
					}
				});

				req.send();
				break;

			case 'image':
				
				//alert('image:'+request);
				//-------------------
				//$(cssBack).addClass('popuploading');
				popupLoad = new Element('div', {'class': 'popuploading'}).injectInside(document.body);
				//$(popupLoad).set('text', '&nbsp;');
				$(popupLoad).setStyle('opacity',0.5);
				$(popupLoad).setStyle('height',window.getHeight());
				
				
				$(popupLoad).addEvent('click', function() { $(popupLoad).dispose(); } );
		

				var newimage = request;

				var newImg = new Image();
				newImg.src = request;

				//------------------------------------------------
				var images = newimage;
				var loader = new Asset.images(images, {
					onComplete: function() {

						var height = newImg.height;
						var width = newImg.width+16;
						
						//alert(height+'-'+width);

						$(cssContent).removeClass('popuploading');
						$(cssContent).innerHTML = '<img src="'+ request +'" alt=""/>';
						
						//------ setup ---------
						$(cssPopup).setStyle('width', width);
						$(cssPopup).setStyle('height', height);

						//alert(width);

						//alert($(cssPopup).getStyle('width'));
							
						$(popupLoad).dispose();

						$(popupback).setStyle('height', window.getScrollHeight());
						$(popupback).fade(0.75);
						$(popup).fade(1);

						//----- resize --------
						popupWidth = $(cssPopup).getStyle('width').toInt();
						popupHeight = $(cssPopup).getStyle('height').toInt();

						var windowheight = window.getHeight();
						var windowwidth = window.getWidth();
						popupleft = (windowwidth - popupWidth)/2;
						
						//var scroll = window.getHeight();
						
						var scrollY = window.getHeight();
						//var top = ((scrollY+popupHeight)/2)+window.getScrollHeight();
						var top = ((scrollY-+popupHeight)/2)+window.getScrollTop();

						$(cssPopup).setStyle('left', popupleft);
						//alert(scrollY+'-'+window.getScrollHeight()+'-'+window.getScrollTop()+'-'+popupHeight);
						$(cssPopup).setStyle('top',top);

					},
					onFailure: function() {
						alert('image load failed');
					}
				});
				
				//---------------------------
				break;

		}

		

	},
	
	resize: function(){
		
		var cssVar = this.options.popupCss;
		var cssPopup = 'popup'+cssVar;
		
		popupWidth = $(cssPopup).getStyle('width').toInt();
		popupHeight = $(cssPopup).getStyle('height').toInt();
		
		var windowheight = window.getHeight();
		var windowwidth = window.getWidth();
		popupleft = (windowwidth - popupWidth)/2;
		
		$(cssPopup).setStyle('left', popupleft);
		$(cssPopup).setStyle('top',window.getScrollTop()+100);
		
	}	
	
});