/*
	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 : 560,
	SCROLL_AMOUNT : 125,  //image width
	//SCROLL_AMOUNT : 0, //use individual width
	DISPLAY_IMAGES : 4,
	BACK_IMG : "images/previous.png",
	BACK_HOVER_IMG : "images/previous.png",
	BACK_DISABLED_IMG : "images/previous.png",
	FORWARD_IMG : "images/next.png",
	FORWARD_HOVER_IMG : "images/next.png",
	FORWARD_DISABLED_IMG : "images/next.png",
	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, "#C0C0C0", "#FFFFFF", this.imageClickEvt, this.imageMouseOverEvt);
			
      this.category = {
            "item" :  [
            		{ "id" : "img1" , "img" : "images/gallery/thumbs/1.jpg", "largeImg" : "images/gallery/1.jpg", "caption" : "" },
            		{ "id" : "img2" , "img" : "images/gallery/thumbs/2.jpg", "largeImg" : "images/gallery/2.jpg", "caption" : "" },
            		{ "id" : "img3" , "img" : "images/gallery/thumbs/3.jpg", "largeImg" : "images/gallery/3.jpg", "caption" : "" },
            		{ "id" : "img4" , "img" : "images/gallery/thumbs/4.jpg", "largeImg" : "images/gallery/4.jpg", "caption" : "" },
            		{ "id" : "img5" , "img" : "images/gallery/thumbs/5.jpg", "largeImg" : "images/gallery/5.jpg", "caption" : "" },
            		{ "id" : "img6" , "img" : "images/gallery/thumbs/6.jpg", "largeImg" : "images/gallery/6.jpg", "caption" : "" },
			{ "id" : "img7" , "img" : "images/gallery/thumbs/7.jpg", "largeImg" : "images/gallery/7.jpg", "caption" : "" }
            ]
        };
        this.gallery.render(this.category);
	},	
	imageClickEvt : function(item, i, obj) {		
		$("largeImage").innerHTML = "<img src='" + item.largeImg + "'/>";
		 		 
	},
	imageMouseOverEvt : function(item, i, obj) {
		obj.style.border = "1px solid #FF0000";
	}
}