var ShowcasePosition = 0;
var ShowcaseSliderPosition = 0;
var ShowcaseMaxPosition = 0;
var ShowcaseHeight = 248;
var ShowcaseImagePath = '/resources/images/Showcase/';
var ShowcaseImages = new Array();
var mainShowcaseImage;
var ShowcaseImageElements = new Array();
var ShowcaseImagesPerPage = 6;
var ShowcasePreloader;
var ShowcaseSliderTimer;
var LoadShowcaseSlider = false;
var TimerSpeed = 9000;
var TimerSpeedSelected = 120000;

//New Vars
var ShowcaseThumbPosition = 0;
var ShowcaseThumbCount = 0;
var ShowcaseMainImage = 0;

//Global Effects Holders 
var FxMoveShowcase; //Used to slide the image sets up and down;

var FxMoveThumbs;
var FxMoveGallery;
var FxMainImage;

//Add Images 

function InitShowcase()
{
    //PreLoader 
    ShowcasePreloader = new Preloader();

    //Setup var for Effects 
    FxMoveShowcase = new Fx.Tween('ShowcaseSetControls', {duration : 'long'});
    FxMoveThumbs = new Fx.Tween('thumbs', {duration : '300', transition: Fx.Transitions.Sine.easeInOut});
    
    ShowcaseThumbCount = ShowcaseImages.length;

    //Load and animate in the first image
    var myImages = new Asset.images(
        [ShowcaseImages[0][0]],
        {onComplete: function()
        {
            //alert('loaded');
            //SwapDisplayImages
            //(
            //    mainShowcaseImage, NewImage
            //);

            ShowcaseImageIn(ShowcaseImages[0][1], "desc", TimerSpeed, 0);
        }
    });
    //Add events to ShowcaseThumbsNextDIV and ShowcaseThumbsBackDIV
    
    $('ShowcaseThumbsNext').addEvents({
        'mouseover': function(){
            //alert('mouseover');
        },
        'mouseout': function(){
            //alert('mouseout');
        },
        'click': function(){
            moveThumbs(3);
        }
    });
    
    $('ShowcaseThumbsBack').addEvents({
        'mouseover': function(){
            //alert('mouseover');
        },
        'mouseout': function(){
            //alert('mouseout');
        },
        'click': function(){
            moveThumbs(-3);
        }
    });
    
    //Add click events to each thumb
    var thumbDivs = $$('div.ShowcaseThumb');
    
    //alert(thumbDivs.length);
    thumbDivs.each(function(item, index)
        {
            
            //Clear Timer 
            
            //ShowcaseSliderTimer = NextShowcaseSlide.periodical(10000);
            
            //Readd the timer at a longer time
            item.setStyle('cursor', 'pointer');
            item.addEvent('click', function(){
                
                ShowcaseSliderTimer = $clear(ShowcaseSliderTimer);

                //Get ID
                ImageIndex = item.get('id');
                
                //Parse Int
                ImageIndex = parseInt(ImageIndex.replace('ShowcaseThumb', ''));
                
                //Set index
                ShowcaseMainImage = ImageIndex;
                
                //Once loaded, swap
                var myImage = new Asset.image(
                    ShowcaseImages[ImageIndex][0], 
                    {
                        onload: function(){
                        //alert('sdfgdfgdf');
                            ShowcaseImageIn(ShowcaseImages[ImageIndex][1], ShowcaseImages[ImageIndex][7], TimerSpeedSelected, ImageIndex);
                            //NextShowcaseSlide.periodical(TimerSpeedSelected);
                        }
                    }
                );
                
                //Animate out current image
                CurrentImage = $('ShowcaseImage').getFirst();
                
                if (CurrentImage != null)
                {
                    //alert(CurrentImage.get('html'));
                    FxMainImage = new Fx.Tween(CurrentImage, {duration : '300', transition: Fx.Transitions.Sine.easeInOut});
                    
                    FxMainImage.addEvent('complete', function () { 
				        CurrentImage.destroy();
			        });			
                    FxMainImage.start('opacity', '0')
                }
                
                if ($('sideTitle') != null)
				{
				    var tempString = $$('#ShowcaseContent div')[index].getElement('h3').get('html');
				    $('sideTitle').set('html', tempString);
				}
				if ($('SideContent') != null)
				{
				    var tempString = $$('#ShowcaseContent div')[index].getElement('p').get('html');
				    $('SideContent').set('html', tempString);
				}
            });
        }
    );
}

function moveThumbs(direction)
{
    //Validate Direction
    //alert(direction);
    if (direction > 0)
    {
        if (ShowcaseThumbCount < ShowcaseThumbPosition+7)
        {
            //alert("no further " + ShowcaseThumbCount + " xfsdfgs " + ShowcaseThumbPosition);
            
        }
        else
        {
            //alert(- parseInt(ShowcaseThumbPosition + direction) * 111);
            FxMoveThumbs.cancel();
            FxMoveThumbs.start('left', -parseInt(ShowcaseThumbPosition + direction) * 111);
            ShowcaseThumbPosition = ShowcaseThumbPosition + direction;
            
            //Check of we need to hide the button
            if (ShowcaseThumbCount < ShowcaseThumbPosition+7)
            {
                //alert("no further " + ShowcaseThumbCount + " xfsdfgs " + ShowcaseThumbPosition);
                $('ShowcaseThumbsNext').setStyle('display', 'none');
            }
            $('ShowcaseThumbsBack').setStyle('display', '');
        }
    }
    
    if (direction < 0)
    {
        if (ShowcaseThumbPosition <1)
        {
            //alert('no further');
        }
        else
        {
            //alert(- parseInt(ShowcaseThumbPosition + direction) * 111);
            FxMoveThumbs.cancel();
            FxMoveThumbs.start('left', - parseInt(ShowcaseThumbPosition + direction) * 111);
            ShowcaseThumbPosition = ShowcaseThumbPosition + direction;
            
            //Display Next Button
            if (ShowcaseThumbPosition <1)
            {
                //alert('no further');
                $('ShowcaseThumbsBack').setStyle('display', 'none');
            }
            $('ShowcaseThumbsNext').setStyle('display', '');
        }
    }
    
    
}



function ShowcaseImageIn(FileName, FileDescription, timerspeed, ShowcaseImagesIndex)
{
  //alert(FileName + ' - ' + FileDescription + " - " + timerspeed)
	
	//Check for index 0, as this will be the one that animates in! 
	var NewImage = new Element('img', {
			'width': '785',
            'alt': FileDescription,
			'title': FileDescription,
            'src': FileName,
            'style': 'display:none',
			'class': 'ShowcaseImage',
			'events': {
            'click': function(){
                //Current image being displayed 
                if ($('mainShowcaseImage') != null)
                {
                var CurrentImage = $('mainShowcaseImage').getFirst('img');
                SwapShowcaseDisplayImages(CurrentImage, this);
                }
          },
          'mouseover': function(){
              //alert('mouseovered');
          }
      }
  });
  
  //Add To Preloader 
  
//    var myImages = new Asset.images(
//    [ShowcaseImagePath + ShowcaseImages[iIndex].substring(0,ShowcaseImages[iIndex].indexOf('|'))],
//    {onComplete: function(){SwapDisplayImages(mainShowcaseImage, NewImage);}
//    });

  
    var myImage = new Asset.image(
        FileName, 
        {
            onload: function(){
                NewImage.setStyle('opacity', 0)
                NewImage.style.display = 'block';
                var imgLoadedEffect = new Fx.Tween(NewImage, {duration : 'long'});
                imgLoadedEffect.start('opacity', 0, 1);
                //NextShowcaseSlide.periodical(timerspeed);
            }
        }
    );

    ShowcasePreloader.addEventOnLoad(NewImage.src, function() {
        //NewImage.getParent().setStyle('background', 'none');
       
    });

    ShowcasePreloader.addToQueue(NewImage.src);
	NewImage.store('index');
	var NewImageDiv = new Element(
	    'div',
	    {
	        'class': 'ShowcaseImageDIV'
	    }
	);
	
	//Populate the size bar with images 
    $$('#ShowcaseImage div').each( function(element, index){
        element.destroy();
    });
	
	NewImage.inject(NewImageDiv)
	NewImageDiv.inject($('ShowcaseImage'));


	//$('ContentShowcase').set('html', ShowcaseImages[ShowcaseImagesIndex][9]);
}

function NextShowcaseSlide()
{
    //ShowcaseSliderTimer = NextShowcaseSlide.periodical(3000);
    
    //Cleanup multiple clicks 
    ShowcaseImageDIVs = $$('div.ShowcaseImageDIV');
    //alert(ShowcaseImageDIVs.length);
    
    //alert('sdf');
    if (ShowcaseMainImage < ShowcaseThumbCount-1) //move next
    {
        ShowcaseMainImage++;
        if (ShowcaseMainImage-3 > ShowcaseThumbPosition)
        {
            //Move thumbs along
            moveThumbs(1);
        }
    }
    else
    {
        ShowcaseMainImage = 0;
        ShowcaseThumbPosition = 1;
        moveThumbs(-1);
    }
    
    //Animate elements 
    var CurrentImage = $('ShowcaseImage').getFirst();
    FxMainImage = new Fx.Tween(CurrentImage, {duration : '300', transition: Fx.Transitions.Sine.easeInOut});
    
    FxMainImage.addEvent('complete', function () { 
        //Clean up any additional image divs						
        $$('#ShowcaseImage div').each( function(element, index){
            element.destroy();
        });
        ShowcaseImageIn(ShowcaseImages[ShowcaseMainImage][1], ShowcaseImages[ShowcaseMainImage][7], TimerSpeed);
    });		
    	
    FxMainImage.start('opacity', '0');
}