/*
	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 : 840,
	SCROLL_AMOUNT : 150,  //image width
	//SCROLL_AMOUNT : 0, //use individual width
	DISPLAY_IMAGES : 5,
	BACK_IMG : "pics/ico_ff_passiv_li.gif",
	BACK_HOVER_IMG : "pics/ico_ff_aktiv_li.gif",
	BACK_DISABLED_IMG : "pics/ico_ff_nicht.gif",
	FORWARD_IMG : "pics/ico_ff_passiv_re.gif",
	FORWARD_HOVER_IMG : "pics/ico_ff_aktiv_re.gif",
	FORWARD_DISABLED_IMG : "pics/ico_ff_nicht.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, "#737373", "#e2001a", this.imageClickEvt);
			
      this.category = {
            "item" :  [
{ "id" : "img1" , "img" : "foto-yoga/1_Gaby_s.jpg", "largeImg" : "foto-yoga/1_Gaby.jpg" },
{ "id" : "img2" , "img" : "foto-yoga/2_Gaby_s.jpg", "largeImg" : "foto-yoga/2_Gaby.jpg" },
{ "id" : "img3" , "img" : "foto-yoga/3_Gaby_s.jpg", "largeImg" : "foto-yoga/3_Gaby.jpg" },
{ "id" : "img4" , "img" : "foto-yoga/4_Gaby_s.jpg", "largeImg" : "foto-yoga/4_Gaby.jpg" },
{ "id" : "img5" , "img" : "foto-yoga/5_Gaby_s.jpg", "largeImg" : "foto-yoga/5_Gaby.jpg" },
{ "id" : "img6" , "img" : "foto-yoga/6_Nina_s.jpg", "largeImg" : "foto-yoga/6_Nina.jpg" },
{ "id" : "img7" , "img" : "foto-yoga/7_Nina_s.jpg", "largeImg" : "foto-yoga/7_Nina.jpg" },
{ "id" : "img8" , "img" : "foto-yoga/8_Nina_s.jpg", "largeImg" : "foto-yoga/8_Nina.jpg" },
{ "id" : "img9" , "img" : "foto-yoga/9_Nina_s.jpg", "largeImg" : "foto-yoga/9_Nina.jpg" },
{ "id" : "img10" , "img" : "foto-yoga/10_Nina_s.jpg", "largeImg" : "foto-yoga/10_Nina.jpg" },
{ "id" : "img11" , "img" : "foto-yoga/11_Marie_s.jpg", "largeImg" : "foto-yoga/11_Marie.jpg" },
{ "id" : "img12" , "img" : "foto-yoga/12_Marie_s.jpg", "largeImg" : "foto-yoga/12_Marie.jpg" },
{ "id" : "img13" , "img" : "foto-yoga/13_Marie_s.jpg", "largeImg" : "foto-yoga/13_Marie.jpg" },
{ "id" : "img14" , "img" : "foto-yoga/14_Marie_s.jpg", "largeImg" : "foto-yoga/14_Marie.jpg" },
{ "id" : "img15" , "img" : "foto-yoga/15_Marie_s.jpg", "largeImg" : "foto-yoga/15_Marie.jpg" },
{ "id" : "img16" , "img" : "foto-yoga/16_MarkW_s.jpg", "largeImg" : "foto-yoga/16_MarkW.jpg" },
{ "id" : "img17" , "img" : "foto-yoga/17_Kreta_s.jpg", "largeImg" : "foto-yoga/17_Kreta.jpg" },
{ "id" : "img18" , "img" : "foto-yoga/18_Kreta_s.jpg", "largeImg" : "foto-yoga/18_Kreta.jpg" },
{ "id" : "img19" , "img" : "foto-yoga/19_Kreta_s.jpg", "largeImg" : "foto-yoga/19_Kreta.jpg" },
{ "id" : "img20" , "img" : "foto-yoga/20_Kreta_s.jpg", "largeImg" : "foto-yoga/20_Kreta.jpg" }
            ]
        };
        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: 0.5, 
				transition:Effect.Transitions.linear,
				from: 0.5,
				to: 0.0,
				afterFinish:function(effect) {					
					$("aa").src = item.largeImg;
					new Effect.Appear($("aa"));
				}
			});
	}
}