var Slide = {
	element : null,
	objWidth : 484,
	imageHeight : 196,
	thumbnails : null,
	images : null,
	titles : null,
	texts : null,
	imageWrap : null,
	titleWrap : null,
	textWrap : null,
	scroller : null,
	titleScroller : null,
	textScroller : null,
	displayIndex : null,
	play : null,
	isAutoPlay: true,
	nextItem : null,
	
	init : function(displayIndex) {
		window.addEvent('load', function(){
			Slide._init(displayIndex);
		});
		
		return;
	},
	_init : function (displayIndex) {
		this.element = $('gallery');
		this.thumbnails = document.getElements('#gallery #pagesControl li');
		this.images = document.getElements('#gallery #imgDisplay .image');
		this.titles = document.getElements('#gallery #pageTitle .title');
		this.texts = document.getElements('#gallery .explanation .text');
		this.displayIndex = displayIndex;
		this.nextItem = displayIndex;
		
		if (!this.element || !this.thumbnails || !this.images || !this.titles || !this.texts) return false;
		
		var totalWidth = Slide.objWidth*this.images.length;
		
		this.imageWrap = new Element('div');
		this.imageWrap.setStyles({'width' : totalWidth + 'px','position' : 'relative','margin-left' : 1*totalWidth + 'px'});
		this.imageWrap.inject(this.images[0].getParent());
		this.images.forEach(function(item,index) {
			item.inject(Slide.imageWrap);
		});
		
		this.titleWrap = new Element('div');
		this.titleWrap.setStyles({'width' : totalWidth + 'px','position' : 'relative','margin-left' : 1*totalWidth + 'px'});
		this.titleWrap.inject(this.titles[0].getParent());
		this.titles.forEach(function(item,index) {
			item.setStyle('display' , 'block');
			item.inject(Slide.titleWrap);
		});
		
		this.textWrap = new Element('div');
		this.textWrap.setStyles({'width' : totalWidth + 'px','position' : 'relative','margin-left' : 1*totalWidth + 'px'});
		this.textWrap.inject(this.texts[0].getParent());
		this.texts.forEach(function(item,index) {
			item.setStyle('display' , 'block');
			item.inject(Slide.textWrap);
		});
		
		this.scroller = new Fx.Morph(this.imageWrap, {duration: 1500, transition: Fx.Transitions.Expo.easeInOut});
		this.titleScroller = new Fx.Morph(this.titleWrap, {duration: 1500, transition: Fx.Transitions.Expo.easeInOut});
		this.textScroller = new Fx.Morph(this.textWrap, {duration: 1500, transition: Fx.Transitions.Expo.easeInOut});
		
		this.thumbnails.each(function(item,index) {
			item.setStyle('display' , 'block');
			if (index < Slide.images.length) {
				item.index = index;
				item.displayImage = Slide.images[index];
				item.displayTitle = Slide.titles[index];
				item.displayText = Slide.texts[index];
				
				item.displayImage.setStyles({'display' : 'block'});
				
				item.addEvent("click",Slide.displayImage.bindWithEvent(item));
			}
		});
		
		Slide.setDisplayImage(this.displayIndex);
		
		return true;
	},
	autoPlayImage: function() {
        if (Slide.isAutoPlay)
		{
            if (Slide.images.length == Slide.nextItem)
                Slide.nextItem = 1;
			else
				Slide.nextItem++;
			
			Slide.setDisplayImage(Slide.nextItem);
        }
    },
	setDisplayImage : function(index) {
		var currentLeft = Slide.imageWrap.getStyle('margin-left').toInt();
		var targetLeft = -1 * Slide.objWidth * (index - 1);
		this.scroller.start({'margin-left' : [currentLeft, targetLeft]});
		this.titleScroller.start({'margin-left' : [currentLeft, targetLeft]});
		this.textScroller.start({'margin-left' : [currentLeft, targetLeft]});
		
		Slide.clearActive();
		Slide.thumbnails[index - 1].addClass('active');
	},
	displayImage : function(event) {
		
		Slide.isAutoPlay = false;
		
		if (!window.ie) {
			event = new Event(event);
			event.preventDefault();
		}else {
			event.cancelBubble = true;
			event.returnValue = false;
		}
		
		Slide.scroller.cancel();
		Slide.textScroller.cancel();
		Slide.titleScroller.cancel();
		
		Slide.element.getFirst().setStyles({'display' : 'block'});
		
 		var currentLeft = Slide.imageWrap.getStyle('margin-left').toInt();
		var targetLeft = -1 * Slide.objWidth * this.index;
		
		Slide.scroller.start({'margin-left' : [currentLeft, targetLeft]});
		Slide.titleScroller.start({'margin-left' : [currentLeft, targetLeft]});
		Slide.textScroller.start({'margin-left' : [currentLeft, targetLeft]});
		
		this.getFirst().setStyles({'display' : 'none'});
		this.getLast().setStyles({'display' : 'block'});
		
		Slide.clearActive();
        this.addClass('active');
		
		return;
	},
	clearActive : function() {
		Slide.thumbnails.forEach(function(item,index) {
            item.removeClass('active');
        });
	}
};