/*
	Example demonstrating usage of the Ajax-ready Sliding Gallery
	Licenses:
	(c) Creative Commons 2006
	http://creativecommons.org/licenses/by-sa/2.5/		
	
	Free to use with my prior permission
	Author: Kevin Hoang Le | http://pragmaticobjects.org
	Date: 2006-06-30
*/

var mainPage = Class.create();
mainPage.prototype = {
	gallery : 0,
	BOX_WIDTH : 488,
	SCROLL_AMOUNT : 106,  //image width
	//SCROLL_AMOUNT : 0, //use individual width
	DISPLAY_IMAGES : 4,
	FORWARD_IMG : "images/gallery/left_arrow.gif",
	FORWARD_HOVER_IMG : "images/gallery/left_arrow.gif",
	FORWARD_DISABLED_IMG : "images/gallery/left_arrow.gif",
	BACK_IMG : "images/gallery/right_arrow.gif",
	BACK_HOVER_IMG : "images/gallery/right_arrow.gif",
	BACK_DISABLED_IMG : "images/gallery/right_arrow.gif",
	category : 0,
	initialize : function() {
			this.gallery = new gallerySlide(this.BOX_WIDTH, this.SCROLL_AMOUNT, this.DISPLAY_IMAGES, this.BACK_IMG,
			this.BACK_HOVER_IMG, this.BACK_DISABLED_IMG, this.FORWARD_IMG, this.FORWARD_HOVER_IMG,
			this.FORWARD_DISABLED_IMG, "#a2a2a2", "#005957", this.imageClickEvt, this.imageMouseOverEvt);
			
			 this.category=myCat;
        //alert(myCat);
      this.gallery.render(this.category);
      $("divCaption").innerHTML = myCaption[0];
	},	
	imageClickEvt : function(item, i, obj) {		
		$("largeImage").innerHTML = "<img src='" + item.largeImg + "'/>";
		$("divCaption").innerHTML = myCaption[i];
		
		var listitems= obj.parentNode.parentNode.parentNode.getElementsByTagName("a")
            for (i=0; i<listitems.length; i++)
                listitems(i).style.border="1px solid #cccccc";
		
		obj.parentNode.style.border="1px solid #005857";
		
	},
	imageMouseOverEvt : function(item, i, obj) {
		obj.style.border = "1px solid #005858";
	}
}