var Gallery = {
	imgDisplayItems : null,
	imgThumbnail : null,
	imgThumbsContainer : null,
	imgThumbItems : null,
	imgThumbPerPage : 15,
	imgMaxThumbPage : 0,
	imgThumbPageWidth : 195,
	pagesControl : null,
	pagingItems : null,
	pagingCurPage : 1,
	currentDisplay : 1,
	
	thumbsContainer : null,
	thumbItems : null,
	thumbPerPage : 5,
    maxThumbPage : 0,
    curThumbPage : 1,
	previous: null,
    next: null,
    thumbPageWidth: 0,
	thumbWidth: 119,
	effect: null,
	ready:false,
	
    init : function() {
        window.addEvent('load',Gallery._init);
    },
    
    _init : function () {
		Gallery.imgDisplayItems = $$('#gallery .imgDisplay img');
		Gallery.imgThumbnail = $$('#gallery .imgThumbnail')[0];	
		Gallery.imgThumbItems = $$('#gallery .imgThumbnail a');
		Gallery.pagesControl = $$('#gallery .imgThumbnail .pagesControl')[0];	
		
		Gallery.imgDisplayItems.forEach(function(item, index) {
			if (index != 0)
            	item.fade(0);
        });
		
		if ((Gallery.imgThumbItems.length % Gallery.imgThumbPerPage) > 0)
			Gallery.imgMaxThumbPage = Math.floor(Gallery.imgThumbItems.length / Gallery.imgThumbPerPage) + 1;
		else
			Gallery.imgMaxThumbPage = Gallery.imgThumbItems.length / Gallery.imgThumbPerPage;
			
		Gallery.imgThumbsContainer = new Element('div', {'id': 'imgThumbsContainer'});
		Gallery.imgThumbsContainer.setStyle('width', (Gallery.imgMaxThumbPage*Gallery.imgThumbPageWidth));
		Gallery.pagingItems = new Array();
		var pagingObject = new Element('ul');
		for(var i = 1;i <= Gallery.imgMaxThumbPage;i++){
			var object = new Element('div', {'id': 'imgThumbsPage' + i});
			object.setStyle('width', Gallery.imgThumbPageWidth);
			object.setStyle('float', 'left');
			var StartLoop = Gallery.imgThumbPerPage * (i -1);
			var endLoop = (Gallery.imgThumbPerPage * i) -1;
			for(var j = StartLoop;j <= endLoop;j++){
				if (Gallery.imgThumbItems[j] == null)
					j = endLoop + 1;
				else {					
					Gallery.imgThumbItems[j].index = j;
					Gallery.imgThumbItems[j].addEvent('click', Gallery.displayImage.bindWithEvent(Gallery.imgThumbItems[j]));
					Gallery.imgThumbItems[j].inject(object);
				}
			}
			object.inject(Gallery.imgThumbsContainer);
			
			if (Gallery.imgMaxThumbPage > 1) {
				var pagingItem = new Element('li');
				var pagingLink = new Element('a', {'href': '#'});
				pagingLink.set('html',i);
				pagingLink.page = i;
				pagingLink.addEvent('click', Gallery.pageChange.bindWithEvent(pagingLink));
				pagingLink.inject(pagingItem);
				if (i == 1)
					pagingItem.addClass('active');
				Gallery.pagingItems[i] = pagingItem;
				pagingItem.inject(pagingObject,'top');
			}
		}
		Gallery.imgThumbsContainer.inject(Gallery.imgThumbnail,'top');		
		pagingObject.inject(Gallery.pagesControl);		
		Gallery.imgThumbnail.fade('in');
		//////////////////////////////////////////		
		Gallery.thumbsContainer = $('imgThumbs');
		Gallery.thumbItems = $$('#imgThumbs a');
		Gallery.previous = $$("#thumbsBox .prev")[0];
        Gallery.next = $$("#thumbsBox .next")[0];	
		
		if ((Browser.Engine.trident) && (Browser.Engine.version == 4))
			Gallery.previous.setStyle('visibility',  'hidden');
		else
			Gallery.previous.fade('out');
		
		if (Gallery.thumbItems.length <= Gallery.thumbPerPage) {
			if ((Browser.Engine.trident) && (Browser.Engine.version == 4))
				Gallery.next.setStyle('visibility',  'hidden');
			else
				Gallery.next.fade('out');
		}
		
		if ((Gallery.thumbItems.length % Gallery.thumbPerPage) > 0)
			Gallery.maxThumbPage = Math.floor(Gallery.thumbItems.length / Gallery.thumbPerPage) + 1;
		else
			Gallery.maxThumbPage = Gallery.thumbItems.length / Gallery.thumbPerPage;
		
		Gallery.thumbPageWidth = Gallery.thumbPerPage * Gallery.thumbWidth;
		Gallery.thumbsContainer.setStyle('width',  Gallery.maxThumbPage * Gallery.thumbPageWidth);

		Gallery.previous.addEvent('click', Gallery.prevThumb);
        Gallery.next.addEvent('click', Gallery.nextThumb);
		Gallery.player = setTimeout("Gallery.playSlide()",5000);
		Gallery.ready = true;
		
		$$('#gallery .loading').setStyles({'display' : 'none'});
    },
	playSlide : function(){
		var nextIndex = Gallery.currentDisplay + 1;
	    if (nextIndex > (Gallery.imgDisplayItems.length - 1))
            nextIndex = 1;
			
	    Gallery.imgDisplayItems[Gallery.currentDisplay - 1].fade(0);
		Gallery.imgDisplayItems[nextIndex - 1].fade(1);
		Gallery.currentDisplay = nextIndex;
			
	    Gallery.player = setTimeout("Gallery.playSlide()",5000);
	    return false;
    },
	displayImage : function(event){
		if (event != null) {
            if (!window.ie) {
                event = new Event(event);
                event.preventDefault();
            } else {
                event.cancelBubble = true;
                event.returnValue = false;
            }
        }
		
        if (Gallery.ready) {
			clearTimeout(Gallery.player);
			Gallery.imgDisplayItems[Gallery.currentDisplay - 1].fade(0);
			Gallery.imgDisplayItems[this.index].fade(1);
			Gallery.currentDisplay = this.index + 1;
        }
    },
	pageChange : function(event){
		if (event != null) {
            if (!window.ie) {
                event = new Event(event);
                event.preventDefault();
            } else {
                event.cancelBubble = true;
                event.returnValue = false;
            }
        }
		
        if (Gallery.ready) {
			var beginMargin = ((Gallery.pagingCurPage - 1) * Gallery.imgThumbPageWidth) * -1;
            var endMargin = ((this.page - 1) * Gallery.imgThumbPageWidth)  * -1;
			
			Gallery.effect = new Fx.Morph(Gallery.imgThumbsContainer, { duration: 'long', transition: Fx.Transitions.Quad });
           	Gallery.effect.start({
				'margin-left': [beginMargin, endMargin]
			});
			
			Gallery.pagingItems[Gallery.pagingCurPage].removeClass('active');
			Gallery.pagingItems[this.page].addClass('active');
			Gallery.pagingCurPage = this.page;
        }
    },
    nextThumb : function(event){
		if (event != null) {
            if (!window.ie) {
                event = new Event(event);
                event.preventDefault();
            } else {
                event.cancelBubble = true;
                event.returnValue = false;
            }
        }
		
        if (Gallery.ready && (Gallery.curThumbPage < Gallery.maxThumbPage)) {
            Gallery.curThumbPage++;
			var beginMargin = Gallery.thumbsContainer.offsetLeft - 20;
            var endMargin = beginMargin - Gallery.thumbPageWidth;
			
			if ((Browser.Engine.trident) && (Browser.Engine.version == 4)) {
				if(Gallery.curThumbPage == Gallery.maxThumbPage)
					Gallery.next.setStyle('visibility',  'hidden');
				Gallery.previous.setStyle('visibility',  'visible');
			} else {
				if(Gallery.curThumbPage == Gallery.maxThumbPage)
					Gallery.next.fade('out');
				Gallery.previous.fade('in');
			}
			Gallery.effect = new Fx.Morph(Gallery.thumbsContainer, { duration: 'long', transition: Fx.Transitions.Quad });
           	Gallery.effect.start({
				'margin-left': [beginMargin, endMargin]
			});			           	
        }
    },
    prevThumb : function(event){
		if (event != null) {
            if (!window.ie) {
                event = new Event(event);
                event.preventDefault();
            } else {
                event.cancelBubble = true;
                event.returnValue = false;
            }
        }
		
        if (Gallery.ready && (Gallery.curThumbPage > 1)) {
            Gallery.curThumbPage--;
			var beginMargin = Gallery.thumbsContainer.offsetLeft - 20;
            var endMargin = beginMargin + Gallery.thumbPageWidth;

			if ((Browser.Engine.trident) && (Browser.Engine.version == 4)) {
            	if (Gallery.curThumbPage == 1)
					Gallery.previous.setStyle('visibility',  'hidden');
				Gallery.next.setStyle('visibility',  'visible');
			} else {
				if (Gallery.curThumbPage == 1)
					Gallery.previous.fade('out');			
				Gallery.next.fade('in');
			}
			Gallery.effect = new Fx.Morph(Gallery.thumbsContainer, { duration: 'long', transition: Fx.Transitions.Quad });
           	Gallery.effect.start({
				'margin-left': [beginMargin, endMargin]
			});
        }
    }
}
Gallery.init();