// JavaScript Document
/*
	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 : 780,
	SCROLL_AMOUNT : 130,  //image width
	//SCROLL_AMOUNT : 0, //use individual width
	DISPLAY_IMAGES : 15,
	BACK_IMG : "../images/page_elements/portfolio/menu_left_arrow.jpg",
	BACK_HOVER_IMG : "../images/page_elements/portfolio/menu_left_arrow.jpg",
	BACK_DISABLED_IMG : "../images/page_elements/portfolio/menu_left_arrow.jpg",
	FORWARD_IMG : "../images/page_elements/portfolio/menu_right_arrow.jpg",
	FORWARD_HOVER_IMG : "../images/page_elements/portfolio/menu_right_arrow.jpg",
	FORWARD_DISABLED_IMG : "../images/page_elements/portfolio/menu_right_arrow.jpg",
	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, "#737373", "#e2001a", this.imageClickEvt, this.imageMouseOverEvt, null,
			this.pagerMouseOverEvt, this.pagerMouseOutEvt);
			
      		this.category = photos_collection;
		
        this.gallery.render(this.category);
		new Effect.Appear($("largeImage"));
		
		
		//preload images with CSS
		this.category.item.each(function(item, i) {
			var image = document.createElement("img");
			image.src = item.largeImg;
			image.style.display = 'none';
			$("preload").appendChild(image);
		});
	},	
	imageClickEvt : function(item, i, obj) {
		new Effect.Opacity($("aa"),
			{
				duration: 1.0, 
				transition:Effect.Transitions.linear,
				from: 1.0,
				to: 0.0,
				afterFinish:function(effect) {					
					$("aa").src = item.largeImg;
					new Effect.Appear($("aa"));
					/*
					//Hack to ensure image will be changed completely
					new Effect.Opacity($("aa"),
						{
							duration: 0.2, 
							transition:Effect.Transitions.linear,
							from: 0.0,
							to: 0.0,
							afterFinish:function(effect) {
								new Effect.Appear($("aa"));
							}
						});
					*/
					/*
					new Effect.Opacity($("aa"),
						{
							duration: 1.0, 
							transition:Effect.Transitions.linear,
							from: 0.0,
							to: 1.0,
						});
					*/
				}
			});
		/*
		new Effect.Fade($("largeImage"),
			{
				duration: 1, 
				queue:'end',
				afterFinish:function(effect) {					
					$("aa").src = item.largeImg;
					new Effect.BlindDown($("largeImage"));
				}
			});
		*/
		
		//$("aa").src = item.largeImg;
		//new Effect.Appear($("largeImage"));		
	},
	imageMouseOverEvt : function(item, i, obj) {
		obj.style.border = "1px solid #B8C705";
	},
	pagerMouseOverEvt : function(item, i, obj, activePage) {			
		obj.style.textDecoration = "underline";
		obj.style.color = "#e2001a";		
	},
	pagerMouseOutEvt : function(item, i, obj, activePage) {
		if (i != activePage) {
			obj.style.textDecoration = "none";
			obj.style.color = "#737373";
		}
	}
}