window.addEvent('domready', function()
{
    var fullImage   = $('galleryFullImage');  // The div of where the image placement is
    var thumbImages = $('thumbImages');

    var fadeIn  = new Fx.Morph
                        (
                            fullImage, 
                            {
                                duration: 375, 
                                transition: Fx.Transitions.Sine.easeOut
                            }
                        );

    var fadeOut = new Fx.Morph
                        (
                            fullImage,
                            {
                                duration: 300,
                                transition: Fx.Transitions.Sine.easeOut
                            }
                        );

    var imgLoading          = '/CMSTemplates/HIFRS/eventgallery/images/ajax-loader.gif';
    var totalThumbSlides    = parseInt($('ctl00_ContentPlaceHolderTextAreaRight_hiddenFieldTotalSlides').value);
    var slideOffset         = 205;
    var currentThumbSlide   = 1;
    var currentPos          = 0;
    var running             = 0;

    var thumbScroll = new Fx.Tween
                        (
                            thumbImages, 
                            {
   			                    transition: Fx.Transitions.Cubic.easeOut
		                    }
		                );

    // Remove Left and Right Buttons there is only one slide

    if(totalThumbSlides == 1)
    {
        $('ctl00_ContentPlaceHolderTextAreaRight_galleryPrevious').setOpacity(0.5);
        $('ctl00_ContentPlaceHolderTextAreaRight_galleryNext').setOpacity(0.5);
    }
    else
    {
        $('ctl00_ContentPlaceHolderTextAreaRight_galleryPrevious').setOpacity(0.5);      

        // Event Code
	    $('ctl00_ContentPlaceHolderTextAreaRight_galleryPrevious').addEvent('click', function(event) 
	    {
		    if(currentThumbSlide == 1 || running == 1) 
		        return;

		    running = 1;
		    currentThumbSlide--; // CURRENT SLIDE IS ONE LESS
		    currentPos += slideOffset;
    		thumbScroll.start('margin-left', currentPos).chain(function()
            {

		        if(currentThumbSlide == 1)
		        {
		            $('ctl00_ContentPlaceHolderTextAreaRight_galleryPrevious').setOpacity(0.5);
                }

                if(currentThumbSlide < totalThumbSlides)
		        {
		            $('ctl00_ContentPlaceHolderTextAreaRight_galleryNext').setOpacity(0.999);
		        }

		        running = 0;
		     });
	    });
	    $('ctl00_ContentPlaceHolderTextAreaRight_galleryNext').addEvent('click', function(event)
	    {
		    if(currentThumbSlide >= totalThumbSlides || running == 1) 
		        return;

    	    running = 1;
		    currentThumbSlide++;
		    currentPos += -(slideOffset);				// CHANGE SCROLL POSITION
		    thumbScroll.start('margin-left', currentPos).chain(function()
            {

		        if(currentThumbSlide >= totalThumbSlides)
		        {
		            $('ctl00_ContentPlaceHolderTextAreaRight_galleryNext').setOpacity(0.5);
                }

                if(currentThumbSlide > 1)
                {
		            $('ctl00_ContentPlaceHolderTextAreaRight_galleryPrevious').setOpacity(0.999);
                }

                running = 0;

            });
	    });    
    }

    // This handles the event of when a thumbnail is clicked on     
    $$('.item').each(function(item)
    {
        item.addEvent('click', function(e)
        {
            e = new Event(e).stop();

            if(fullImage.getChildren().length > 0)
            {
                if (fullImage.getChildren()[0].getProperty('src') == item.href)
                    return;
            }

            fadeOut.start
            (
                { 
			        'opacity':0
		        }
			).chain(function()
		    {
		        if($('imageTitle') != undefined)    
		            $('imageTitle').innerHTML = "&nbsp;";

                if($('imageDescription') != undefined) 		            
		            $('imageDescription').innerHTML = "&nbsp;";

		        fullImage.empty(); // Clear Image area
		        var load = new Element('img', { 'src' : imgLoading, 'class' : 'loading' }).inject(fullImage);
		        fadeIn.start
		        (
                    { 
                        'opacity' : 1
                    }
		        )
                .chain(function()
                {
                    loadNewImage(item);
				});
		    });
        });
    });
    
    function loadNewImage(item)
    {
        newImage = new Element('img'); // Creates a new image element

        newImage.isLoaded = false;

        newImage.removeEvents();

        newImage.addEvents(
        {
            'load': function() 
            {
                fadeOut.start
                (
                    {
                        'opacity' : 0
                    }
                ).chain(function()
                {
                    if(newImage.isLoaded == true)
                        return;

                    if($('imageTitle') != undefined)
                        $('imageTitle').innerHTML = item.getChildren()[1].innerHTML;

                    if($('imageDescription') != undefined)
                        $('imageDescription').innerHTML = item.get('desc');
                        
                    newImage.set('alt', item.get('title'));
                    newImage.set('title', item.get('title'));

                    fullImage.empty(); // Clear Image area
                    newImage.inject(fullImage); // push new image

                    if(newImage.width > 355)
                        newImage.setStyle('width', '356px');

                    if(newImage.height > 281)
                        newImage.setStyle('height', '280px');

                    fadeIn.start // Make the new image visable
                    ( 
                        {
                            'opacity' : 0.999
                        }
                    );

                    newImage.isLoaded = true;

                });
            }
            ,
            'error':function()
            {
                fullImage.empty();
                fullImage.appendText("Could not load image");
            }
        });

        if(item != null)
            newImage.src = item.href;
    }

    loadNewImage($('first'));

});