/*
	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-travel/1_Ankara_s.jpg", "largeImg" : "foto-travel/1_Ankara.jpg" },
{ "id" : "img2" , "img" : "foto-travel/2_Ankara_s.jpg", "largeImg" : "foto-travel/2_Ankara.jpg" },
{ "id" : "img3" , "img" : "foto-travel/3_Ankara_s.jpg", "largeImg" : "foto-travel/3_Ankara.jpg" },
{ "id" : "img4" , "img" : "foto-travel/4_Ankara_s.jpg", "largeImg" : "foto-travel/4_Ankara.jpg" },
{ "id" : "img5" , "img" : "foto-travel/5_Ankara_s.jpg", "largeImg" : "foto-travel/5_Ankara.jpg" },
{ "id" : "img6" , "img" : "foto-travel/6_Lexington_s.jpg", "largeImg" : "foto-travel/6_Lexington.jpg" },
{ "id" : "img7" , "img" : "foto-travel/7_Lexington_s.jpg", "largeImg" : "foto-travel/7_Lexington.jpg" },
{ "id" : "img8" , "img" : "foto-travel/8_Lexington_s.jpg", "largeImg" : "foto-travel/8_Lexington.jpg" },
{ "id" : "img9" , "img" : "foto-travel/9_Lexington_s.jpg", "largeImg" : "foto-travel/9_Lexington.jpg" },
{ "id" : "img11" , "img" : "foto-travel/11_Lexington_s.jpg", "largeImg" : "foto-travel/11_Lexington.jpg" },
{ "id" : "img12" , "img" : "foto-travel/12_Lexington_s.jpg", "largeImg" : "foto-travel/12_Lexington.jpg" },
{ "id" : "img13" , "img" : "foto-travel/13_India_s.jpg", "largeImg" : "foto-travel/13_India.jpg" },
{ "id" : "img14" , "img" : "foto-travel/14_India_s.jpg", "largeImg" : "foto-travel/14_India.jpg" },
{ "id" : "img15" , "img" : "foto-travel/15_India_s.jpg", "largeImg" : "foto-travel/15_India.jpg" },
{ "id" : "img16" , "img" : "foto-travel/16_India_s.jpg", "largeImg" : "foto-travel/16_India.jpg" },
{ "id" : "img17" , "img" : "foto-travel/17_India_s.jpg", "largeImg" : "foto-travel/17_India.jpg" },
{ "id" : "img18" , "img" : "foto-travel/18_India_s.jpg", "largeImg" : "foto-travel/18_India.jpg" },
{ "id" : "img19" , "img" : "foto-travel/19_India_s.jpg", "largeImg" : "foto-travel/19_India.jpg" },
{ "id" : "img20" , "img" : "foto-travel/20_India_s.jpg", "largeImg" : "foto-travel/20_India.jpg" },
{ "id" : "img21" , "img" : "foto-travel/21_India_s.jpg", "largeImg" : "foto-travel/21_India.jpg" },
{ "id" : "img22" , "img" : "foto-travel/22_India_s.jpg", "largeImg" : "foto-travel/22_India.jpg" },
{ "id" : "img23" , "img" : "foto-travel/23_London_s.jpg", "largeImg" : "foto-travel/23_London.jpg" },
{ "id" : "img24" , "img" : "foto-travel/24_London_s.jpg", "largeImg" : "foto-travel/24_London.jpg" },
{ "id" : "img25" , "img" : "foto-travel/25_London_s.jpg", "largeImg" : "foto-travel/25_London.jpg" },
{ "id" : "img26" , "img" : "foto-travel/26_London_s.jpg", "largeImg" : "foto-travel/26_London.jpg" },
{ "id" : "img27" , "img" : "foto-travel/27_London_s.jpg", "largeImg" : "foto-travel/27_London.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"));
				}
			});
	}
}