/**
 * @author Edwin Webb
 * @use Img gallery lightbox, custom build for etwebb.com.
 * @copy  Yours to take and mod. If u improve it plz let me know. kthxbai
 */

 var galBox = new Class({
 	
	Implements: Options,

	options: {
		selector: "images",
		single_images: false
	},
 		
	initialize: function(options) {
		//Global Vars
		this.imgArray = [];
		this.tempAr = [];
		this.curLink = "";
		this.curImg = {};
		this.curIndex = 0;
		
		//find HTML inline
		this.box = $("galbox");
		this.overlay = $("overlay");
		this.content = $("galbox_c");
						
		//fade it out
		this.box.fade("hide");
		this.overlay.fade("hide");
		
		//Hide on close click
		$("galbox_tr").getFirst("img").addEvent("click", function() {
			this.close();
		}.bind(this));
		
		//Hoide on overlay click
		this.overlay.addEvent("click", function() {
			this.close();
		}.bind(this));
		
		//Esc keypress handler
		this.keydownHdlr = function(e) {
            e = new Event(e);
            e.stop();
            if (e.code == 27) this.close();
        }.bind(this);
		
		var linkArray = $(options.selector).getChildren();
		
		linkArray.each(function(item,index,array) {				
			item.addEvent("click", function(e) {
				e.stop();					
				this.singleImgClickHandler(item.get("href"));					
			}.bind(this));
			
		}.bind(this));
	
	},
	
	singleImgClickHandler: function(url) {
		
		//Set for loading
		this.content.empty();
		$("galbox_br").empty();
		this.content.addClass("loading");
		
		//resize
		this.resize(200,100);
		
		//Show the box
		this.show();
		
		//Set the heading		
		$("galbox_tl").getFirst("h1").set("text", "");
				
		//Load in the first img		
		var imgAsset = new Asset.image(url, {
			onload: function() {
				this.imgDone(imgAsset.src);
			}.bind(this)
		});
	},
	
	linkClickHandler: function (id, title) {
		
		//SEt for loading
		this.content.empty();
		$("galbox_br").empty();
		this.content.addClass("loading");
		this.tempAr = this.imgArray[id].concat();
		this.curLink = id;
		var imgUrl = this.tempAr.shift().link;
		
		//resize
		this.resize(200,100);
		
		//Show the box
		this.show();
		
		//Set the heading		
		$("galbox_tl").getFirst("h1").set("text", title);
		
		//Load in the first img		
		var imgAsset = new Asset.image(imgUrl, {
			onload: function() {
				this.imgDone(imgAsset.src);
			}.bind(this)
		});
		
	},
	
	show: function() {
		this.box.fade("in");
		this.overlay.fade(.6);		
	},
	
	close: function() {
		this.box.fade("out");
		this.overlay.fade("out");
		this.curImg.fade("out");
	},
	
	imgDone: function(src) {
		this.content.removeClass("loading");
		var img = new Element("img", {"src":src});
		this.content.adopt(img);
		this.resize(img.getSize().x,img.getSize().y);
		this.curImg = img;
		
		// Add Description
		if (this.imgArray[this.curLink]) {
			var firstDescp = new Element("p", {
				"text": this.imgArray[this.curLink][0].description
			});
			$("galbox_br").adopt(firstDescp);
		}
		
		//load next images
		if (this.tempAr.length > 0) {
			var imgAsset = new Asset.image(this.tempAr.shift().link, {
				onload: function(){
					this.nextImgDone(imgAsset.src);
				}.bind(this)
			});
		}
	},

	showImg: function(el) {
		if (el == this.curImg) {
			return
		}
		el.fade("in");
		this.curImg.fade("out");
		this.curImg = el;
		
	},
	
	resize: function(w,h) {
		
		/*
		 * Hardcoded to CSS and PSD sizes.
		 * Need to build most of the CSS from here when implimenting different PSDs, although most of the ground work is set.
		 */
		
		//Graphic Sizes
		var shadowSize = 40;
		var curveSize = 16;
		var topMargin = 36;
		var bottomMargin = 57;
		
		//Content Size
		var width = w  - curveSize;
		var height = h;
				
		//Outer Sizes
		var galboxWidth = shadowSize + + width + curveSize + shadowSize;		 
		var galboxHeight = shadowSize + topMargin + height + bottomMargin + shadowSize;
		
		//Elements
		var tl = $("galbox_tl");
		var tr = $("galbox_tr");
		var c = $("galbox_c");
		var br = $("galbox_br");
		var bl = $("galbox_bl");
		var navi = $("galbox_navi");
		
		/*
		 * Next is a bit of a mess >< did resizing the worng way round.
		 */
		if(height + curveSize * 2 + topMargin + bottomMargin > window.getSize().y) {
			height =  window.getSize().y - shadowSize * 4;
			galboxHeight = shadowSize + topMargin + height + bottomMargin + shadowSize;
			c.getFirst().set("height",height);			
			w = w * height/h
			c.getFirst().set("width",w);
			width = w  - curveSize * 2;
			galboxWidth = shadowSize + curveSize + width + curveSize + shadowSize;
		}
						
		//size
		this.box.setStyle("width", galboxWidth);
		this.box.setStyle("height", galboxHeight);
		tl.setStyle("width",galboxWidth - curveSize - shadowSize);
		tr.setStyle("height", galboxHeight - bottomMargin - shadowSize);
		c.setStyle("width", curveSize + width);
		c.setStyle("height", height);
		br.setStyle("width", galboxWidth - curveSize - shadowSize);
		bl.setStyle("height", height + bottomMargin + shadowSize);
		bl.setStyle("margin-top", -height);
		navi.setStyle("width", width + curveSize + 60);
		navi.setStyle("height",  height);
		
		
		//poistion
		this.box.setStyle("top", (window.getSize().y / 2 - galboxHeight / 2) + window.getScroll().y);
		this.box.setStyle("left", window.getSize().x / 2 - galboxWidth / 2);
	}
 });