/*
	Slimbox (Extended Version 1.3.1, 2007-02-21)
	by Yukio Arita (http://homepage.mac.com/yukikun/software/slimbox_ex/)
	- 	Support to show external content using iframe.
	- 	Support to set content size. You can add width/height parameters 
		in rev attribute of the anchor url.
		ex1) <a href="image.jpg" rev="width=50%, height=50%" rel="lightbox">
				<img src="image_thumb.jpg" alt="image"></a>
		ex2) <a href="text.html" rev="width=500, height=300" rel="lightbox">
				some text here</a>
	- 	Some rendering problem with IE6 is fixed. Now you can use Slimbox in 
		valid XHTML document with XML prolog.
	- Of course, license is same as original.

	Based on:
	Slimbox v1.3 - The ultimate lightweight Lightbox clone
	by Christophe Beyls (http://www.digitalia.be) - MIT-style license.
	Inspired by the original Lightbox v2 by Lokesh Dhakar.


<div id="lbCenter">
   <div id="mb_header"><div></div></div>
      <div id="lbCanvas">
         Lorem ipsum dolor sit amet, consectetur 
         adipisicing elit, sed do eiusmod tempor incididunt 
         ut labore et dolore magna aliqua. Ut enim ad minim 
         veniam, quis nostrud exercitation ullamco laboris 
         nisi ut aliquip ex ea commodo consequat. Duis aute 
         irure dolor in reprehenderit in voluptate velit esse 
         cillum dolore eu fugiat nulla pariatur. Excepteur 
         sint occaecat cupidatat non proident, sunt in culpa 
         qui officia deserunt mollit anim id est laborum.
      </div>
   <div id="mb_footer"><div></div></div>
</div>

#lbCenter {
   background: #cccccc;
}
#mb_header div {
   background: url(roundedcornr_598623_tl.png) no-repeat top left;
}
#mb_header {
   background: url(roundedcornr_598623_tr.png) no-repeat top right;
}
#mb_footer div {
   background: url(roundedcornr_598623_bl.png) no-repeat bottom left;
}
#mb_footer {
   background: url(roundedcornr_598623_br.png) no-repeat bottom right;
}

#mb_header div, #mb_header, 
#mb_footer div, #mb_footer {
   width: 100%;
   height: 10px;
   font-size: 1px;
}
#lbCanvas { margin: 0 10px; }

*/


var Lightbox = {
	init: function(options){
		this.options = Object.extend({
			resizeDuration: 400,
			resizeTransition: Fx.Transitions.sineInOut,
			initialWidth: 250,
			initialHeight: 250,
			animateCaption: true,
			defaultIframeWidth : 500, 
			defaultIframeHeight: 300,
			initialHeaderHeight: 35,
			initialFooterHeight: 5,
			reloadParent: 0,
			redirectUrl: ""
		}, options || {});

		// IE 6 - XML prolog problem
		if(window.ie6 && document.compatMode=="BackCompat"){
			this.options.animateCaption = false;
		}

		this.anchors = [];
		$each(document.links, function(el){
			if (el.rel && el.rel.test(/^lightbox/i)){
				el.onclick = this.click.pass(el, this);
				this.anchors.push(el);
			}
		}, this);
		this.eventKeyDown = this.keyboardListener.bindAsEventListener(this);
		this.eventPosition = this.position.bind(this);

		this.overlay = new Element('div').setProperty('id', 'lbOverlay').injectInside(document.body);
	
		this.center = new Element('div').setProperty('id', 'lbCenter').setStyles({width: this.options.initialWidth+'px', height: this.options.initialHeight+'px', marginLeft: '-'+(this.options.initialWidth/2)+'px', display: 'none'}).injectInside(document.body);
		
		this.header = new Element('div').setProperty('id', 'mb_header').injectInside(this.center);
		new Element('div').injectInside(this.header);
		//new Element('a').setProperties({id: 'lbCloseLink', href: '#'}).injectInside(this.header).onclick = this.overlay.onclick = this.close.bind(this);
		//this.caption = new Element('div').setProperty('id', 'lbCaption').injectInside(this.header);
		
		this.canvas = new Element('div').setProperty('id', 'lbCanvas').injectInside(this.center);
		new Element('a').setProperties({id: 'lbCloseLink', href: '#'}).injectInside(this.canvas).onclick = this.overlay.onclick = this.close.bind(this);
		this.caption = new Element('div').setProperty('id', 'lbCaption').injectInside(this.canvas);
		this.footer = new Element('div').setProperty('id', 'mb_footer').injectInside(this.center);
		new Element('div').injectInside(this.footer);
		//[clean]this.prevLink = new Element('a').setProperties({id: 'lbPrevLink', href: '#'}).setStyle('display', 'none').injectInside(this.canvas);
		//[clean]this.nextLink = this.prevLink.clone().setProperty('id', 'lbNextLink').injectInside(this.canvas);
		//[clean]this.prevLink.onclick = this.previous.bind(this);
		//[clean]this.nextLink.onclick = this.next.bind(this);

		this.bottomContainer = new Element('div').setProperty('id', 'lbBottomContainer').setStyle('display', 'none').injectInside(document.body);
		//[clean]this.bottom = new Element('div').setProperty('id', 'lbBottom').injectInside(this.bottomContainer);
		//new Element('a').setProperties({id: 'lbCloseLink', href: '#'}).injectInside(this.bottom).onclick = this.overlay.onclick = this.close.bind(this);
		//this.caption = new Element('div').setProperty('id', 'lbCaption').injectInside(this.bottom);
		//[clean]this.number = new Element('div').setProperty('id', 'lbNumber').injectInside(this.bottom);
		
		//[clean]new Element('div').setStyle('clear', 'both').injectInside(this.bottom);

		/* Build effects */
		var nextEffect = this.nextEffect.bind(this);
		this.fx = {
			overlay: this.overlay.effect('opacity', {duration: 500}).hide(),
			resizeCenter: this.center.effects({duration: this.options.resizeDuration, transition: this.options.resizeTransition, onComplete: nextEffect}),
			image: this.canvas.effect('opacity', {duration: 500, onComplete: nextEffect}),
			bottom: this.bottomContainer.effect('height', {duration: 400, onComplete: nextEffect})
		};

		this.preloadPrev = new Image();
		this.preloadNext = new Image();
		
	},

	click: function(link){
		if (link.rel.length == 8) return this.show(link.href, link.title, link.rev);

		var j, itemNumber, items = [];
		this.anchors.each(function(el){
			if (el.rel == link.rel){
				for (j = 0; j < items.length; j++) if(items[j][0] == el.href && items[j][2] == el.rev) break;
				if (j == items.length){
					items.push([el.href, el.title, el.rev]);
					if (el.href == link.href && el.rev == link.rev) itemNumber = j;
				}
			}
		}, this);
		return this.open(items, itemNumber);
	},

	show: function(url, title, rev){
		return this.open([[url, title, rev]], 0);
	},

	open: function(items, itemNumber){
		this.items = items;
		this.position();
		this.setup(true);
		var wh = (window.getHeight() == 0) ? window.getScrollHeight() : window.getHeight();
		var st = document.body.scrollTop  || document.documentElement.scrollTop;
		this.top = st + 50 + (wh / 15);
		this.center.setStyles({top: this.top+'px', display: ''});
		this.fx.overlay.start(0.8);
		return this.changeItem(itemNumber);
	},

	position: function(){
		//IE6 - XML prolog problem.
		var ww = (window.getWidth() == 0) ? window.getScrollWidth()-22 : window.getWidth();
		var wh = (window.getHeight() == 0) ? window.getScrollHeight() : window.getHeight();
		var st = document.body.scrollTop  || document.documentElement.scrollTop;
		this.overlay.setStyles({top: st+'px', height: wh+'px', width:ww+'px'});
	},

	setup: function(open){
		var elements = $A(document.getElementsByTagName('object'));
		if (window.ie) elements.extend(document.getElementsByTagName('select'));
		elements.each(function(el){ el.style.visibility = open ? 'hidden' : ''; });
		var fn = open ? 'addEvent' : 'removeEvent';
		window[fn]('scroll', this.eventPosition)[fn]('resize', this.eventPosition);
		document[fn]('keydown', this.eventKeyDown);
		this.step = 0;
	},

	keyboardListener: function(event){
		switch (event.keyCode){
			case 27: case 88: case 67: this.close(); break;
			case 37: case 80: this.previous(); break;	
			case 39: case 78: this.next();
		}
	},

	previous: function(){
		return this.changeItem(this.activeItem-1);
	},

	next: function(){
		return this.changeItem(this.activeItem+1);
	},

	changeItem: function(itemNumber){
		if (this.step || (itemNumber < 0) || (itemNumber >= this.items.length)) return false;
		this.step = 1;
		this.activeItem = itemNumber;

		this.bottomContainer.style.display = 'none';//[clean]this.prevLink.style.display = this.nextLink.style.display = 'none';
		//[clean]this.prevLink.style.display = 'none';
		//[clean]this.nextLink.style.display = 'none';
		
		this.fx.image.hide();
		this.center.className = 'lbLoading';

		// discard previous content by clicking
		this.removeCurrentItem();
		
		// check item type
		var url = this.items[this.activeItem][0];
		var rev = this.items[this.activeItem][2];
		var transferpage = this.items[this.activeItem][3];
		
		var re_imageURL = /\.(jpe?g|png|gif|bmp)/i;
		if( url.match(re_imageURL) ) {
			this.preload = new Image();	// JavaScript native Object
			this.preload.datatype = 'image';
			this.preload.w = this.matchOrDefault(rev, new RegExp("width=(\\d+%?)", "i"), -1); //-1 if use original size.
			this.preload.h = this.matchOrDefault(rev, new RegExp("height=(\\d+%?)", "i"), -1);
			this.options.reloadParent = this.matchOrDefault(rev, new RegExp("reloadParent=(\\d+%?)", "i"), 0);
			//this.options.redirectUrl = this.matchOrDefault(rev, new RegExp("redirectUrl=(\\d+%?)", "i"), "");
			if (transferpage!="")
			{
			//alert(rev);
			this.options.redirectUrl = transferpage;
			}
			else
			{
			this.options.redirectUrl = "";
			}
			
			this.preload.onload = this.nextEffect.bind(this);
			this.preload.src = url;
		}else{
			this.preload = new Object ();	// JavaScript native Object
			this.preload.datatype = 'iframe';
			this.preload.w =  this.matchOrDefault(rev, new RegExp("width=(\\d+)", "i"), this.options.defaultIframeWidth);
			this.preload.h = this.matchOrDefault(rev, new RegExp("height=(\\d+)", "i"), this.options.defaultIframeHeight);
			this.options.reloadParent = this.matchOrDefault(rev, new RegExp("reloadParent=(\\d+)", "i"), 0);
			//this.options.redirectUrl = this.matchOrDefault(rev, new RegExp("redirectUrl=(\\d+)", "i"), "");
			if (transferpage!="")
			{
			//alert(rev);
			this.options.redirectUrl = transferpage;
			}
			else
			{
			this.options.redirectUrl = "";
			}
			//alert(this.options.redirectUrl);
			this.preload.src = url;
			this.nextEffect(); //asynchronous loading
		}

		return false;
	},

	nextEffect: function(){
		switch (this.step++){
		case 1:
			this.center.className = '';

			// create HTML element
			if( this.preload.datatype == 'image' ) {
				var ws = (this.preload.w == -1) ? this.preload.width.toString() : this.preload.w.toString();
				var hs = (this.preload.h == -1) ? this.preload.height.toString() : this.preload.h.toString();
				this.p_width = ( q = ws.match(/(\d+)%/) ) ? q[1] * this.preload.width * 0.01 : ws;
				this.p_height = ( q = hs.match(/(\d+)%/) ) ? q[1] * this.preload.height * 0.01 : hs;
				new Element('img').setProperties({id: 'lbImage', src:this.preload.src, width:this.p_width, height:this.p_height}).injectInside(this.canvas);
				//[clean]this.nextLink.style.right = '';
			}else{
				this.p_width = this.preload.w;
				this.p_height = this.preload.h;
				// Safari would not update iframe content that has static id.
				this.iframeId = "lbFrame_"+new Date().getTime();
				new Element('iframe').setProperties({id: this.iframeId, width: this.p_width, height: this.p_height, frameBorder:0, scrolling:'no', src:this.preload.src}).injectInside(this.canvas);
				//new Element('iframe').setProperties({id: this.iframeId, width: this.p_width, height: this.p_height, frameBorder:0, scrolling:'yes', src:this.preload.src}).injectInside(this.canvas);
				//[clean]this.nextLink.style.right = '25px';
			}
			this.canvas.style.width = this.p_width+'px';//[clean]this.bottom.style.width = this.p_width+'px';
			//this.canvas.style.height = this.p_height+'px';//[clean]this.prevLink.style.height = this.nextLink.style.height = this.p_height+'px';
			this.canvas.style.height = eval(this.p_height)+eval(this.options.initialHeaderHeight)+eval(this.options.initialFooterHeight)+'px';

			//[clean]this.bottom.style.width = '100%';

			this.caption.setHTML(this.items[this.activeItem][1] || '');
			//[clean]this.number.setHTML( (this.items.length == 1) ? '' : 'Page ' + (this.activeItem+1) + ' of ' + this.items.length );

			if (this.activeItem) this.preloadPrev.src = this.items[this.activeItem-1][0];
			if (this.activeItem != (this.items.length - 1)) this.preloadNext.src = this.items[this.activeItem+1][0];
			if (this.center.clientHeight != this.canvas.offsetHeight){
				var oh = (this.p_height == this.canvas.clientHeight) ? eval(this.canvas.offsetHeight)+eval(this.options.initialHeaderHeight)+eval(this.options.initialFooterHeight) : eval(this.p_height)+17+eval(this.options.initialHeaderHeight)+eval(this.options.initialFooterHeight); // fix for ie (18)
				//var oh = (this.p_height == this.canvas.clientHeight) ? this.canvas.offsetHeight : eval(this.p_height)+18; // fix for ie (18)
				this.fx.resizeCenter.start({height: oh});
				break;
			}

			this.step++;
		case 2:
			if (this.center.clientWidth != this.canvas.offsetWidth){
				var ow = (this.p_width == this.canvas.clientWidth) ? this.canvas.offsetWidth : eval(this.p_width)+18; // fix for ie (18)
				this.fx.resizeCenter.start({width: ow, marginLeft: -ow/2});
				break;
			}
			this.step++;
		case 3:
			//this.bottomContainer.setStyles({top: (this.top - (this.bottom.offsetHeight+44))+'px', height:this.bottom.offsetHeight+44+'px', marginLeft: this.center.style.marginLeft, width:this.center.style.width, display: ''});
			this.bottomContainer.setStyles({top: (this.top + this.center.clientHeight)+'px', height:'0px', marginLeft: this.center.style.marginLeft, width:this.center.style.width, display: ''});
			this.fx.image.start(1);
			break;
		case 4:
			if (this.options.animateCaption){
				// This is not smooth animation in IE 6 with XML prolog.
				// If your site is XHTML strict with XML prolog, disable this option.
				//[clean]this.fx.bottom.start(0,this.bottom.offsetHeight+10);
				break;
			}
			//[clean]this.bottomContainer.style.height = (this.bottom.offsetHeight+10)+'px';
		case 5:
			if (this.activeItem){
				//[clean]this.prevLink.style.display = '';
				//[clean]this.prevLink.style.display = 'none';
			}
			if (this.activeItem != (this.items.length - 1)){
				//[clean]this.nextLink.style.display = '';
				//[clean]this.nextLink.style.display = 'none';
			}
			
			// draggable
			this.dragOptions = {
				handle: this.header,
				onStart: function() {
					this.center.setStyle('opacity', 0.5);
					//this.center.style.zIndex = this.getLastZIndex();
				}.bind(this),
				
				onComplete: function() {
					this.center.setStyle('opacity', 1);
				}.bind(this)
			};
			this.center.makeDraggable(this.dragOptions);
			
			this.step = 0;
		}
	},

	close: function(){
		if (this.step < 0) return;
		this.step = -1;
		this.removeCurrentItem();	// discard content
		for (var f in this.fx) this.fx[f].stop();
		this.center.style.display = this.bottomContainer.style.display = 'none';
		this.fx.overlay.chain(this.setup.pass(false, this)).start(0);
		if (this.options.reloadParent==1){
			window.location.reload(true);
		}
	
		if (this.options.redirectUrl !="" && $defined(this.options.redirectUrl)){
			//alert(this.options.redirectUrl);
			//window.location.href=redirectUrl;
			window.location.href = this.options.redirectUrl;
		}
		return false;
	},

	removeCurrentItem: function(){
		if (this.preload){
			if( this.preload.datatype == 'image' ) {
				$('lbImage').remove();
				this.preload.onload = Class.empty;
			}else{
				$(this.iframeId).remove();
			}
			this.preload = null;
		}		
	},

	matchOrDefault: function(str, re, val){
		var hasQuery = str.match(re);
		return hasQuery ? hasQuery[1] : val;
	}

};

var load_method = (window.ie ? 'load' : 'domready');
window.addEvent(load_method, Lightbox.init.bind(Lightbox));