var XMLgallery;
var GalleryPosition = 0;
var GallerySliderPosition = 0;
var GalleryMaxPosition = 0;
var GalleryHeight = 249;
var GalleryImages = new Array();
var mainGalleryImage;
var GalleryImageElements = new Array();
var GalleryImagesPerPage = 6;
var p;
var SliderTimer;
var LoadSlider = false;

//Global Effects Holders
var FxMoveGallery;  //Used to slide the image sets up and down;
var FxGalleryNextLink;
var FxGalleryBackLink;
var OldImageMorph;


//Add Images 

function InitClientSlideshow()
{
    FxGalleryNextLink = new Fx.Tween('ClientGallerySetNext', { duration: 'short' });
    FxGalleryBackLink = new Fx.Tween('ClientGallerySetBack', { duration: 'short' });

    b = true;
    ['ClientGallerySetControlsPositioner', 'ClientImageGallery', 'ClientGallerySetControls',
  'ClientGallerySetNext', 'ClientGalleryNextLink', 'ClientGalleryBackLink',
  'ClientGallerySetBack', 'ClientGallerySetControls'].each(function(item, index)
  {
      if (!$chk($(item)))
      {
          b = false;
      }
  });

    if (b)
    {
        LoadSlider = true;
        //PreLoader 
        p = new Preloader();

        //Setup var for Effects
        FxMoveGallery = new Fx.Tween('ClientGallerySetControls', { duration: 'long' });
        GalleryImages.each(function(item, index)
        {

            var temparr = GalleryImages[index].split("|");

            //main, thumb, description, index (0 based)
            CreateImageThumbDiv(temparr[0], temparr[1], temparr[2], index)
        });
        
        GalleryMaxPosition = (GalleryImages.length / GalleryImagesPerPage) - 1;

        GalleryImageElements = $$('.ClientGalleryImage');
        
        //Set Global Variable to the GalleryMainImage var
        mainGalleryImage = $('ClientmainGalleryImage').getFirst('img');
        //Setup initial position of the galleryMainImage Element
        //mainGalleryImage.setStyle('position', 'absolute');
        mainGalleryImage.setStyle('left', '660px');
        //Create and Load main Image into imageGallery
        UpdateGalleryNavigation();
        OldImageMorph = new Fx.Tween(mainGalleryImage, { duration: 900, transition: Fx.Transitions.Sine.easeInOut });
        
        //Reszie gallery based on count
        if (GalleryImages.length == 3)
        {
            //resize to one colum
            $('ClientGallerySetControls').setStyle('width', '100px');
        }
        else
        {
            //resize to 2 colum
            $('ClientGallerySetControls').setStyle('width', '222px');
        }
     
        //Set the window to the correct place.
        //$('ClientmainGalleryImage').setStyle('left', '0px;');
     
    }
    else
    {
    }
}

//Start the slide when all the stuff has loaded

window.addEvent('load', function()
{
    if (LoadSlider)
    {
        //SliderTimer = NextSlide.periodical(7000);
    }
});

function UpdateGalleryNavigation()
{

    if (GallerySliderPosition <= 0)
    {
        FxGalleryBackLink.start('opacity', '0');
    }
    else
    {
        $('ClientGallerySetBack').setStyle('opacity', '0');
        $('ClientGallerySetBack').setStyle('display', '');
        FxGalleryBackLink.start('opacity', '1');
    }

    if (GallerySliderPosition >= GalleryMaxPosition)
    {
        FxGalleryNextLink.start('opacity', '0');
    }
    else
    {
        $('ClientGallerySetNext').setStyle('opacity', '0');
        $('ClientGallerySetNext').setStyle('display', '');
        FxGalleryNextLink.start('opacity', '1');
    }

}

function CreateImageThumbDiv(LargeFileName, FileName, FileDescription, iIndex)
{

    //Check for index 0, as this will be the one that animates in! 
    var NewImage = new Element('img', {
        'width': '110',
        'alt': FileDescription,
        'title': FileDescription,
        'style': 'display: none;',
        'src': GalleryImageThumbPath + FileName,
        'class': 'ClientGalleryImage'
    });



    var myThumbImage = new Asset.image([NewImage.src],
        {
            onload: function()
            {
                //set thumb to 1 opacity, and add on click event to thumb
                NewImage.setStyle('opacity', 1);
            }
        });



    p.addEventOnLoad(NewImage.src, function()
    {
        //NewImage.getParent().setStyle('background', 'none');
        NewImage.setStyle('opacity', 0)
        NewImage.style.display = 'block';
        var imgLoadedEffect = new Fx.Tween(NewImage, { duration: 'long' });
        imgLoadedEffect.start('opacity', 1);
    });

    p.addToQueue(NewImage.src);

    NewImage.store('index', iIndex);

    var NewImageDiv = new Element('div', { 'class': 'ClientImageThumb' });

    //Add To Preloader
    if (iIndex == 0)
    {
        var myImage = new Asset.image(
        [GalleryImagePath + LargeFileName],
        {
            onload: function()
            {
                //set thumb to 1 opacity, and add on click event to thumb
                SwapDisplayImages(myImage, NewImageDiv, iIndex);
                NewImage.addEvent('click', function()
                {
                    $clear(SliderTimer)
                    SliderTimer = NextSlide.periodical(15000);
                    SwapDisplayImages(myImage, NewImageDiv, iIndex);
                });
            }
        });
    }
    else
    {
        var myImage = new Asset.image([GalleryImagePath + LargeFileName],
        {
            onload: function()
            {
                //set thumb to 1 opacity, and add on click event to thumb
                NewImage.addEvent('click', function()
                {
                    $clear(SliderTimer)
                    SliderTimer = NextSlide.periodical(15000);
                    SwapDisplayImages(myImage, NewImageDiv, iIndex);
                });
            }
        });
    }

    NewImageDiv.store('index', iIndex);

    //Populate the size bar with images 
    NewImage.inject(NewImageDiv)
    NewImageDiv.inject($('ClientGallerySetControls'));
}

function SlideGallery(absolutePosition)
{

    //0=start
    GallerySliderPosition = absolutePosition;
    if (GallerySliderPosition < 0)
    { GallerySliderPosition = 0; }

    if (GallerySliderPosition > GallerySliderPosition)
    { GallerySliderPosition = 0; }

    FxMoveGallery.cancel();
    FxMoveGallery.start('margin-top', -GallerySliderPosition * GalleryHeight);


    //Set Variable
    //GalleryPosition = position;
    UpdateGalleryNavigation();

}

function NudgeGallery(modifier)
{

    GallerySliderPosition = GallerySliderPosition + modifier;
    SlideGallery(GallerySliderPosition);
}

function SwapDisplayImages(NewImageObject, ThumbImageObject, index)
{
    if (ThumbImageObject)
    {
        if (isNaN(index))
        {
            index = 0;
            GalleryPosition = 0
        }
        var NewImageMorph = new Fx.Tween(NewImageObject, { duration: 900, transition: Fx.Transitions.Sine.easeInOut });
        var NewImageMorphBack = new Fx.Tween(GalleryImageElements[GalleryPosition], { duration: 900, transition: Fx.Transitions.Sine.easeInOut });
        var tempImageMorphBack;
        var NewThumbOut = new Fx.Tween(ThumbImageObject.getFirst(), { duration: 900, transition: Fx.Transitions.Sine.easeInOut });

        OldImageMorph.cancel();
        GalleryPosition = index

        //First Animate main image out of view
        $$('.ClientGalleryImage').each(function(Element, index)
        {
            if (Element.getStyle('margin-left') != "0px" && Element.retrieve('index') != GalleryPosition)
            {
            }

            if (Element.getStyle('margin-left') != "0px" && Element.retrieve('index') != GalleryPosition)
            {
                tempImageMorphBack = new Fx.Tween(Element, { duration: 900, transition: Fx.Transitions.Sine.easeInOut });
                tempImageMorphBack.start('margin-left', '0px');
            }
        });

        //Animate thumb out of view
        OldImageMorph.start('left', 660);


        OldImageMorph.removeEvents('complete');
        //Then Change the source of th4 amin display to the new image, and
        OldImageMorph.addEvent('complete', function()
        {
        	mainGalleryImage.setProperty('src', NewImageObject.getProperty('src'));

        	//Mive gallery image back

        	if (GlobalDisplayMode == 0 && GalleryImages.length == 3)
        	{
        		OldImageMorph.start('left', "-55px");
        	}
        	else
        	{
        		if ($('ClientGallerySetControls').getChildren().length == 6 && GlobalDisplayMode != 0)
        		{
        			OldImageMorph.start('left', "-25px");
        		}
        		else
        		{
        			OldImageMorph.start('left', "0px");
        		}
        		
        	}
        	//NewImageMorph.start('margin-left', "0px");

        	ThumbImageObject.getFirst().tween('margin-left', '-110px');


        	//NewThumbOut.start('margin-left', '-110px')
        });

    }
}

var NextSlide = function()
{
    $clear(SliderTimer);
    SliderTimer = NextSlide.periodical(12000);

    //NewImage src
    var imgSrc;
    //Check for last image in sequence
    var ImageToChange;
    if (GalleryPosition + 1 == GalleryImages.length)
    {
        //Ok we are at the last image, shoot to first
        SlideGallery(0);
        var img = new Element('img', { 'src': GalleryImagePath + GalleryImages[0].split("|")[0] });

        ImgSrc = GalleryImagePath + GalleryImages[0].split("|")[0]
        Thumb = $('ClientGallerySetControls').getChildren()[0];
        SwapDisplayImages(img, Thumb, 0);
    }
    else //Normal
    {
        if ((GalleryPosition + 1) % GalleryImagesPerPage == 0)
        {
            //Ok about to cross over
            SlideGallery((GalleryPosition + 1) / GalleryImagesPerPage);
        }
        var img = new Element('img', { 'src': GalleryImagePath + GalleryImages[GalleryPosition + 1].split("|")[0] });
        Thumb = $('ClientGallerySetControls').getChildren()[GalleryPosition + 1];
        SwapDisplayImages(img, Thumb, GalleryPosition + 1);

        //        SwapDisplayImages(myImage, NewImage);
        //        SwapDisplayImages(mainGalleryImage, GalleryImageElements[++GalleryPosition]);
    }
}