/**
 * JavaScript by Jeffrey Ouma.
 * Copyright© 2008 artkenya.net Ltd.
 * All rights reserved.
 * 
 * Script name: image.js
 * Purpose: Defines functions for handling and manipulating images.
 */

// Create the Bleez namespace
Bleez = {};
// Create the img namespace
Bleez.img = {}; 	

Bleez.img.currentimage = 1;

/**
 * Variable name: fullsize.
 * Purpose: Defines the fullsize panel which shows images represented by a thumbnail.
 */

Bleez.img.ShowFullSize = function(i) {
	// Hide all full size images to begin with
	var fs = YAHOO.util.Dom.getElementsByClassName("fullsize-image", "div", "fullsize");
	YAHOO.util.Dom.addClass(fs, "hide");
	
	// Set the title of the panel to the title of the thumbnail link
	var t = YAHOO.util.Dom.get("th"+i);
	var elm = YAHOO.util.Dom.get("fscaption");
	elm.innerHTML = t.title;
	
	elm = YAHOO.util.Dom.get("currentimage");
	elm.innerHTML = i;
	Bleez.img.currentimage = i;
	
	// Display the image with the selected index
	YAHOO.util.Dom.removeClass("fs"+i, "hide");
	
	var elmStyle = YAHOO.util.Dom.getStyle("fullsize_c", "visibility");
	var x = parseInt(YAHOO.util.Dom.getStyle("fs"+i, "width").replace(/px/, ""));
	var y = parseInt(YAHOO.util.Dom.getStyle("fs"+i, "height").replace(/px/, ""));
	
	if(elmStyle == "visible") {
		// Animate the fullsize panel to the new image's dimensions
			
		x = parseInt(x) + 20;
		
		var animContainer = new YAHOO.util.Anim(Bleez.img.fullsize.id, {width:{to: x, unit:"px"}}, 0.6, 
			YAHOO.util.Easing.backOut);
			
		var h = parseInt(YAHOO.util.Dom.getStyle("fsimages", "height").replace(/px/, ""));
		if(h == y) {
			h = h + 1;
			var animImage = new YAHOO.util.Anim("fsimages", {height:{from:h, to: y, unit:"px"}}, 0.6, 
				YAHOO.util.Easing.backIn);
			
		} else {
			var animImage = new YAHOO.util.Anim("fsimages", {height:{to: y, unit:"px"}}, 0.6, 
				YAHOO.util.Easing.backOut);

		}
		
		var incrementWidth = function(){
			var w = YAHOO.util.Dom.getStyle(Bleez.img.fullsize.id, "width");
			w = parseInt(w.replace(/px/, ""));
			
			YAHOO.util.Dom.setStyle("fullsize_c", "width", w + "px");
			
			w = w - 20;
			YAHOO.util.Dom.setStyle("fsimages", "width", w + "px");
		};
		animContainer.onTween.subscribe(incrementWidth);
		animContainer.animate();
		animImage.animate();	
		
	} else {
		// Display the fullsize image in the panel
		YAHOO.util.Dom.setStyle("fsimages", "width", x + "px");
		YAHOO.util.Dom.setStyle("fsimages", "height", y + "px");
		x = parseInt(x) + 20;
		//Bleez.img.fullsize.cfg.setProperty("width", x + "px");
		YAHOO.util.Dom.setStyle(Bleez.img.fullsize.id, "width", x + "px");
		YAHOO.util.Dom.setStyle("fullsize_c", "width", x + "px");
		
		YAHOO.util.Dom.removeClass("fullsize", "hide");
		Bleez.img.fullsize.show();
		
	}
	
	
};

/**
 * Function name: Init
 * Purpose: Executes when the page loads after the DOM is ready. Performs initialization of any
 * elements or values to their default.
 */
Bleez.img.Init = function() {
	// Set the copyright year in the panel footer
	var c = Site.main.Copyright();
	if(c) {
		var elm = YAHOO.util.Dom.get("panelcopyright");
		elm.innerHTML = c.replace(/\s/, " ");
	}
	if(YAHOO.util.Dom.get("fullsize")) {
		Bleez.img.fullsize = new YAHOO.widget.Panel("fullsize", {
		  close:true,
		  visible:false,
		  modal:true,
		  fixedcenter:true,
			autofillheight: "body",
			constraintoviewport:true,
			draggable:true,
			effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25}	
		});
		
		YAHOO.util.Dom.removeClass("fullsize", "hide");
		
		// Set the YUI ImageLoader Utility to preload all images with the "preload-image" class
		var imageGroup = new YAHOO.util.ImageLoader.group("th1", "mouseover", 2);
		imageGroup.className = "preload-image";
		
	  // Render the fullsize panel
	  Bleez.img.fullsize.render();
		YAHOO.util.Dom.addClass("fullsize", "hide");
  
		// Select all thumbnail links (elements with the "thumb-link" class)
		var thumbs = YAHOO.util.Dom.getElementsByClassName("thumb-link", "a", "yui-main");
		
		var elm = YAHOO.util.Dom.get("totalimages");
		elm.innerHTML = thumbs.length;
	
		// Loop through all thumbnail links and...
		for (var i=1; i<=thumbs.length; i++){
		  // Add a trigger when the thumbnail link is moused over
			if(i>1) imageGroup.addTrigger(thumbs[i-1], "mouseover");	
				
		  // Attach a listener for the click event of each thumbnail link
		  YAHOO.util.Event.addListener(thumbs[i-1], "click", function(e) {
				
				// Find and display the full size image coresponding to the thumbnail that was clicked (this)
				var i = this.id.replace(/th/, "");
				Bleez.img.ShowFullSize(i);
				
				// Prevent the clicked link from opening in a new window as it is supposed to do if JS is disabled
				YAHOO.util.Event.preventDefault(e);
			});
		}
		
		//YAHOO.util.Event.addListener("previmage-link", "click", Bleez.util.Scrub(this));
		YAHOO.util.Event.addListener("previmage-link", "click", function() {
			if(Number(Bleez.img.currentimage) > 1) {
				Bleez.img.ShowFullSize(Number(Bleez.img.currentimage) - 1);
			} else {
				var elm = YAHOO.util.Dom.get("totalimages");
				Bleez.img.ShowFullSize(elm.innerHTML);
			}
	  });
		//YAHOO.util.Event.addListener("nextimage-link", "click", Bleez.util.Scrub(this));
		YAHOO.util.Event.addListener("nextimage-link", "click", function() {
			var elm = YAHOO.util.Dom.get("totalimages");
			if(Number(Bleez.img.currentimage) >= Number(elm.innerHTML)) {
				Bleez.img.ShowFullSize(1);
			} else {
				Bleez.img.ShowFullSize(Number(Bleez.img.currentimage) + 1);
			}
	  });
		
	}
};

YAHOO.util.Event.onDOMReady(Bleez.img.Init);