var Mylightbox = Class.create(
{
	overlayElement: null,
	overlayPopup: null,
	
	initialize: function() {
		
		this.path = this;
		//this.skip_effect = this.path.readAttribute('rel')=='skip';
		this.effecting = false;
		
		// build elements
		this.overlayElement = Builder.node('div', { id:'mylightbox_overlay'});
		
		var n = null;
		/MSIE (\d+\.\d+);/.test(navigator.userAgent);
		if(Prototype.Browser.IE && Number(RegExp.$1)<=6){
			n = Builder.node('img', { id:'mylightbox_img','class':'png-ie'});
		}else{
			n = Builder.node('img', { id:'mylightbox_img','class':'png'});
		}
		
		this.overlayPopup = Builder.node('div', { id:'mylightbox_popup' }, [
			Builder.node('div', { id:'mylightbox_closebtn', style:'text-align:right; position:absolute; cursor:pointer', className:'text07'}, ''),
			n
		]);
		
		$$('body').first().appendChild(this.overlayElement);
		$$('body').first().appendChild(this.overlayPopup);
		
		$('mylightbox_overlay').hide();
		$('mylightbox_popup').hide();
		
		// active links
		this.addClickEvent();
	},
	
	addClickEvent: function() {
		
		var thisObj = this;
		
		$$('a.mylightbox').each(function(e) { 
			Event.observe(e, 'click', function() { thisObj.onClickOpen(e); });
		}.bind(this));
		
		[$('mylightbox_img'), $('mylightbox_overlay'), $('mylightbox_closebtn')].each(function(e) {
			Event.observe(e, 'click', function() { thisObj.onClickClose(e); });
		}.bind(this))
		
	},
	
	onClickOpen: function(path) {
		
		if (this.effecting) return;
		this.effecting = true;
		
		this.path = path;
		this.target = path.down();
		this.skip_effect = this.path.readAttribute('rel')=='skip';
		
		var imgPreloader = new Image();
		imgPreloader.onload = function(){
			this.getBroswerDimensions();
			this.ow = imgPreloader.width;
			this.oh = imgPreloader.height;
			this.ox = (this.broswerWidth-this.ow)/2;
			this.oy = (this.broswerHeight-this.oh)/2;
			this.w = this.skip_effect ? this.ow : this.target.getDimensions().width;
			this.h = this.skip_effect ? this.oh : this.target.getDimensions().height;
			this.x = this.skip_effect ? this.ox : this.target.cumulativeOffset().left;
			this.y = this.skip_effect ? this.oy : this.target.cumulativeOffset().top;
			this.showOverlay();
			this.showPopup();
		}.bind(this);
		imgPreloader.src = this.path;
		
	},
	
	onClickClose: function() {
		
		if (this.effecting) return;
		this.effecting = true;
		
		this.hidePopup();
		this.hideOverlay();
		
	},
		
	showOverlay: function() {
		
		$('mylightbox_overlay').setStyle({	width: '100%', 
									 	height: this.getPageDimensions().height+'px', 
									 	top: '0px',
									 	left: '0px',
									 	background: '#333329',
										position:	"absolute",
										zIndex:		"1000"		 });
		
		new Effect.Appear($('mylightbox_overlay'),{duration: .8, to:.75});
		
	},
	
	showPopup: function() {
		
		$('mylightbox_img').src = this.path;
		//alert(this.path.match(/\.png$/i));
		if(Prototype.Browser.IE && this.path.match(/\.png$/i)){
				$('mylightbox_img').src="/lib/js/x.gif";
				$('mylightbox_img').style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this.path+"', sizingMethod='scale')";
				$('mylightbox_img').style.backgroundImage="url(/lib/js/x.gif)";
				//alert("ok");
		}
		
		$('mylightbox_img').setStyle({	width:		this.w+"px",
										height:		this.h+"px"	});
		$('mylightbox_closebtn').setStyle({	marginTop:	(40)+"px",
										marginLeft:	(this.w-55)+"px"	});
		$('mylightbox_popup').setStyle({	width:		this.w+"px",
										height:		this.h+"px",
										top:		this.y+"px",
										left:		this.x+"px",
										position:	"absolute",
										zIndex:		"1100"		});
		$('mylightbox_popup').show();
		
		new Effect.Transform([
			{ '#mylightbox_popup' : 
				'width:'+this.ow+'px;' +
				'height:'+this.oh+'px;' +
				'left:'+this.getScrollOffsets()[0]+'px;' +
				'top:'+this.getScrollOffsets()[1]+'px;' },
			{ '#mylightbox_img' : 
				'width:'+this.ow+'px;' +
				'height:'+this.oh+'px;' },
			{ '#mylightbox_closebtn' : 
				'margin-left:'+(this.ow-55)+'px;' }
		], { duration: .8 , afterFinish:this.afterPop.bind(this) }).play();
		
	},
	
	afterPop: function() {
		
		var thisObj = this;
		this.effecting = false;
		
		this.PE = new PeriodicalExecuter(function() {
			var x = thisObj.getScrollOffsets()[0];
			var y = thisObj.getScrollOffsets()[1];
			$('mylightbox_popup').setStyle({left:x+"px",top:y+"px"});
		}.bind(this), .1);
		
	},
	
	hideOverlay: function() {
		
		new Effect.Fade($('mylightbox_overlay'))
		
	},
	
	hidePopup: function() {
		
		this.PE.stop();
				
		new Effect.Transform([
			{ '#mylightbox_popup' : 
				'width:'+this.w+'px;' +
				'height:'+this.h+'px;' +
				'left:'+this.x+'px;' +
				'top:'+this.y+'px;' },
			{ '#mylightbox_img' : 
				'width:'+this.w+'px;' +
				'height:'+this.h+'px;' },
			{ '#mylightbox_closebtn' : 
				'margin-left:'+(this.w-55)+'px;' }
		], { duration: .8 , afterFinish:this.afterClose.bind(this) }).play();
		
	},
		
	afterClose: function() {
		
		this.effecting = false;
		$('mylightbox_overlay').hide();
		$('mylightbox_popup').hide();
		
	},
	
	// tools function
	
	getStyle: function(obj, styleProp) {
		
		if (obj.currentStyle) return obj.currentStyle[styleProp];
		else if (window.getComputedStyle) return document.defaultView.getComputedStyle(obj,null).getPropertyValue(styleProp);
		
	},
	
	getScrollOffsets: function() {
		
		this.getBroswerDimensions();
		var ox = document.viewport.getScrollOffsets()[0]+((this.broswerWidth-this.ow)/2);
		var oy = document.viewport.getScrollOffsets()[1]+((this.broswerHeight-this.oh)/2);
		return [ox, oy];
		
	},

	getBroswerDimensions: function() {
		var broswerWidth = 0, broswerHeight = 0;
		if( typeof( window.innerWidth ) == 'number' ) {
			//Non-IE
			broswerWidth = window.innerWidth;
			broswerHeight = window.innerHeight;
		} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
			//IE 6+ in 'standards compliant mode'
			broswerWidth = document.documentElement.clientWidth;
			broswerHeight = document.documentElement.clientHeight;
		} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
			//IE 4 compatible
			broswerWidth = document.body.clientWidth;
			broswerHeight = document.body.clientHeight;
		}
		this.broswerWidth = broswerWidth;
		this.broswerHeight = broswerHeight;
	},
	
	getPageDimensions: function() {
		var xScroll, yScroll;
	
		if (window.innerHeight && window.scrollMaxY) {	
			xScroll = document.body.scrollWidth;
			yScroll = window.innerHeight + window.scrollMaxY;
		} else if (document.body.scrollHeight > document.body.offsetHeight){
			xScroll = document.body.scrollWidth;
			yScroll = document.body.scrollHeight;
		} else { 
			xScroll = document.body.offsetWidth;
			yScroll = document.body.offsetHeight;
		}
	
		var windowWidth, windowHeight;
		if (self.innerHeight) {
			windowWidth = self.innerWidth;
			windowHeight = self.innerHeight;
		} else if (document.documentElement && document.documentElement.clientHeight) {
			windowWidth = document.documentElement.clientWidth;
			windowHeight = document.documentElement.clientHeight;
		} else if (document.body) { 
			windowWidth = document.body.clientWidth;
			windowHeight = document.body.clientHeight;
		}	
	
		if(yScroll < windowHeight){
			pageHeight = windowHeight;
		} else { 
			pageHeight = yScroll;
		}
	
		if(xScroll < windowWidth){	
			pageWidth = windowWidth;
		} else {
			pageWidth = xScroll;
		}
	
		pageDimensions = { height:pageHeight };
		return pageDimensions;	
	}
	
}
);

function initMylightbox() { mylightbox = new Mylightbox(); }
Event.observe(window, 'load', initMylightbox, false);
//Component.init('.mylightbox','Mylightbox');