var imageGallery = Class.create();

imageGallery.prototype = {
    imageList: 0,
    imageIndex: 0,
    thumbnailSize: 25,
	section: null,
    initialize: function(imgList, initialIndex, section)
    {
        this.imageList = imgList;
        this.imageIndex = initialIndex;
		this.section = section;
        this.setImages();
    },
	setIndex: function(imageIndex)
	{
		this.imageIndex = imageIndex;
		this.setImages();
	},
    moveImageForward: function()
    {
		
		
    	if ((this.imageIndex + 1) != this.imageList.length) {
        	this.imageIndex++;
        	this.setImages();
    	}
    },
    moveImageBackward: function()
    {
		
    	if (0 != this.imageIndex) {
        	this.imageIndex--;
			this.setImages();
    	}
    },
    setImages: function()
    {		
		$('main_image_container').hide();
		
        $('left_image_container').innerHTML = '';
        
        // Prevent the left if we are first image
        if (0 != this.imageIndex) {
        	$('left_image_container').style.display = 'block';
        	$('left_image_container').appendChild(this.createImageLink(this.imageList[this.imageIndex - 1], true));
        } else {
        	$('left_image_container').style.display = 'none';
        }

		$('right_image_container').innerHTML = '';
        
		if ((this.imageIndex +1) != this.imageList.length) {
			$('right_image_container').style.display = 'block';
        	$('right_image_container').appendChild(this.createImageLink(this.imageList[this.imageIndex + 1], true));
		} else {
			$('right_image_container').style.display = 'none';
		}

		
        $('main_image_container').innerHTML = '';
		// Required: See http://wiki.script.aculo.us/scriptaculous/show/Effect.SlideDown
		$containerDiv = $('main_image_container').appendChild(document.createElement('div'));
		
        $containerDiv.appendChild(this.createImageLink(this.imageList[this.imageIndex], false));
		$('main_image_container').show();
        //Effect.SlideDown('main_image_container');

    },
    createImageLink: function(imageSrc, isThumbnail)
    {
        var image = document.createElement('img');
        image.src = '/img/gallery/' + this.section + '/' + imageSrc;

        if (isThumbnail) {
            image.width = this.thumbnailSize;
            image.height = this.thumbnailSize;
        }

        return image;
    },
    reset: function()
    {
    	this.imageIndex = 0;
    	if ($('left_image_container').style.display == 'none') {
    		$('left_image_container').style.display = 'block';
    	}
    	if ($('right_image_container').style.display == 'none') {
    		$('right_image_container').style.display = 'block';
    	}
    }

}

function initImages()
{
	curSection = $('gallery_display').className;

	new Ajax.Request('/xml/gallery/list/' + curSection +'/', {
					method:'get',
					onSuccess: function(transport) {
						jsonResponse = transport.responseText.evalJSON();
						
						imgList = new Array(jsonResponse.length);
						
						imgCounter = 0;
						
						jsonResponse.each(function(node) {
								imgList[imgCounter] = node.filename;
								imgCounter++;
						});
						
						gallery = new imageGallery(imgList, 0, curSection);
						Event.observe($('left_image_container'), 'click', gallery.moveImageBackward.bind(gallery));
						Event.observe($('right_image_container'), 'click', gallery.moveImageForward.bind(gallery));
					}
				});
				
   
}

Event.observe(window, 'load', initImages);