//Initiate Object
var displayModeChanging = false; //Holds the state of the diplay mode
var GlobalDisplayMode = 0; //Holds the state of the diplay mode
var shadowAnimator;
var clientListAnimator;
var iconDisplaytimer;
var IconDisplayPosition;

//Enter path for gallery resources
GalleryImagePath = '../images/clients/';
GalleryImageThumbPath = GalleryImagePath + 'clientThumbs/';
var GalleryImages = new Array();

//Create array of images for slideshow!

/// <reference path="../images/gallery/steadmans-colour-5.jpg" />

/// <reference path="../images/gallery/kubota-manual-9.jpg" />

/// <reference path="../images/gallery/dow-ppt-10.jpg" />

/// <reference path="../images/gallery/aon-seminar-7.jpg" />



window.addEvent('domready', function()
{
    //Initiate the slider effect
    InitPage();
});

function InitPage()
{
    //Initiate fx transditions
    shadowAnimator = new Fx.Tween($('InnerShadow'), { duration: '500', transition: Fx.Transitions.Sine.easeInOut, link: 'cancel' });
    clientsListAnimator = new Fx.Tween($('clientsList'), { duration: '500', transition: Fx.Transitions.Sine.easeInOut, link: 'cancel' });
    clientsListAnimator2 = new Fx.Tween($('clientsList'), { duration: '500', transition: Fx.Transitions.Sine.easeInOut, link: 'cancel' });
    clientListAnimator = new Fx.Tween($('clientList'), { duration: '500', transition: Fx.Transitions.Sine.easeInOut, link: 'cancel' });
    clientListAnimator2 = new Fx.Tween($('clientList'), { duration: '500', transition: Fx.Transitions.Sine.easeInOut, link: 'cancel' });

    ClientsContentAnimator = new Fx.Morph($('ClientsContent'), { duration: '500', transition: Fx.Transitions.Sine.easeInOut, link: 'cancel' });
    
    ClientsExpandView = new Fx.Tween($('ExpandView'), { duration: '500', transition: Fx.Transitions.Sine.easeInOut, link: 'cancel' });
    
    ClientImageGalleryAnimator = new Fx.Morph($('ClientImageGallery'), { duration: '500', transition: Fx.Transitions.Sine.easeInOut, link: 'cancel' });
    ClientContentTextAnimator = new Fx.Morph($('ClientContentText'), { duration: '500', transition: Fx.Transitions.Sine.easeInOut, link: 'cancel' });
    
    ClientContentRightSideAnimator = new Fx.Tween($('ClientContentRightSide'), { duration: '500', transition: Fx.Transitions.Sine.easeInOut, link: 'cancel' });
    ClientmainGalleryImageAnimator = new Fx.Tween($('ClientmainGalleryImage'), { duration: '500', transition: Fx.Transitions.Sine.easeInOut, link: 'cancel' });

    //Hide Expander Button
    $('ExpandView').setStyle("opacity", "0");

    $$('.clientListMouseOver').each(function(el)
    {
        //var ElasticTransition = new Fx.Transition(Fx.Transitions.Elastic, 2);

        //var bgAnimate = new Fx.Tween(el, {duration : 'long', transition: ElasticTransition.easeOut});
        var bgAnimate = new Fx.Tween(el, { duration: '200', transition: Fx.Transitions.Circ.easeOut });

        el.addEvents({
            'mouseover': function()
            {
                bgAnimate.cancel();
                bgAnimate.start('background-position', '0px 0px')
            },
            'mouseout': function()
            {
                bgAnimate.cancel();
                bgAnimate.start('background-position', '-230px 0px')
            }
        });
        //var effect = el.effect('background-position', {duration: 500, wait: false, transition: Fx.Transitions.circOut, fps: 50}).set(-300);
        //el.addEvent('mouseover', Effect.goTo.pass(0, Effect)).addEvent('mouseout', Effect.goTo.pass(-300, Effect)
        //);
    });

    //Add events to the display type icons
    $('IconView').addEvents({
        'click': function()
        {
            //Change To Icon View 
            ChangeClientsDisplayMode(1);
            GlobalDisplayMode = 1;
        }
    });

    //Add events to the display type icons
    $('ExpandView').addEvents({
        'click': function()
        {
            //Clear Timer Events
            $clear(iconDisplaytimer);
            IconDisplayPosition = 1000;

            //Change Display Mode
            ChangeClientsDisplayMode(0);
            GlobalDisplayMode = 0;
        }
    });

    $('listView').addEvents({
        'click': function()
        {
            //check if in expanded mode, and if so first fade out content for smoothe transition to list view
            if ((GlobalDisplayMode) == 1)
            {
                clientListAnimator.addEvent('complete', function()
                {
                    //Clear Timer Events
                    $clear(iconDisplaytimer);
                    IconDisplayPosition = 1000;

                    //Change Display Mode
                    ChangeClientsDisplayMode(0);
                    GlobalDisplayMode = 0;
                });

                clientListAnimator.start("opacity", "0");
            }
            else
            {
                //Clear Timer Events
                $clear(iconDisplaytimer);
                IconDisplayPosition = 1000;

                //Change Display Mode
                ChangeClientsDisplayMode(0);
                GlobalDisplayMode = 0;
            }

        }
    });

    $('RetractView').addEvents({
        'click': function()
        {
            $clear(iconDisplaytimer);

            //etermin client list state 
            ChangeClientsDisplayMode(-1); //Change to closed state 
            GlobalDisplayMode = -1;
        }
    });

    ChangeClientsDisplayMode(0);
    GlobalDisplayMode = 0;
    //AddOnlickForClients
    //AddOnlickForClients();
}



var NextIconDisplay = function()
{
    if ($chk($$('div.clientListImageHidden')[IconDisplayPosition]))
    {
        //do do someting 
        AnimateIconInAndIncrement();
    }
    else
    {
        //Terminate periodical 
        $clear(iconDisplaytimer);
    }
}


function ChangeClientsDisplayMode(displayMode)
{

    //Null All on complete values for tweens
    shadowAnimator.removeEvents('complete');
    clientsListAnimator.removeEvents('complete');
    clientsListAnimator2.removeEvents('complete');
    clientListAnimator.removeEvents('complete');
    ClientsContentAnimator.removeEvents('complete');
    ClientsExpandView.removeEvents('complete');
    clientListAnimator2.removeEvents('complete');
    ClientmainGalleryImageAnimator.removeEvents('complete');

    //Create Fx tools for animations 
    shadowAnimator.cancel();
    if (displayMode == 1) //display wide menu
    {

        ClientsContentAnimator.start({
            'opacity': '0',
            'margin-left': '765px',
            'width': '540px'
        });
        if ($('ClientContentRightSide'))
        {
            ClientContentRightSideAnimator.start('left', '535px');
        }



        //clientsListAnimator.start('margin-left', "70px");
        //Move Shadow to normal position
        shadowAnimator.start('left', '765px');

        //shadowAnimator.start('left', '500px');
        clientListAnimator.start('width', '765px');

        clientListAnimator2.start("padding-left", "20px");

        clientsListAnimator.addEvent('complete', function()
        {
            iconDisplaytimer = NextIconDisplay.periodical(100);
        });

        clientsListAnimator.start('width', '765px');
        IconDisplayPosition = 0;

        //Remove background image 
        $$('div.clientListMouseOver').each(function(El, In)
        {
            El.setStyle('background-image', 'none');
            El.setStyle('padding-left', '10px');
        });
        //Initiate the animation
        //iconDisplaytimer = NextIconDisplay.periodical(100);
    }
    else if (displayMode == 0) //display thin menu
    {

            ClientmainGalleryImageAnimator.start('width', 830);
        
        
        //Fade Out Expander Button ()
        ClientsExpandView.start('opacity', '0');
        if ($('ClientContentRightSide'))
        {
            ClientContentRightSideAnimator.start('left', '570px');
        }

        ClientsContentAnimator.start({
            'opacity': '1',
            'margin-left': '220px',
            'width': '550px'
        });
        //Display Button to contract

        //Display and expand Client list Menu
        shadowAnimator.addEvent('complete', function()
        {
            ClientImageGalleryAnimator.start({'width': 792});

            clientListAnimator2.start("padding-left", "0px");
            clientListAnimator.start('opacity', '1');
            clientsListAnimator.start('opacity', '1');
            $('clientList').setStyle("width", "220px");
            $('clientsList').setStyle("width", "220px");

            //Clean up once back
            $$('div.clientListImageHidden').each(function(El, In)
            {
                var Animator = new Fx.Morph(El, { duration: 'short', transition: Fx.Transitions.Sine.easeInOut, link: 'cancel' });
                Animator.set('.clientListImageHidden');
                var Animator = new Fx.Morph(El, { duration: 'short', transition: Fx.Transitions.Sine.easeInOut, link: 'cancel' });
                Animator.set('.clientListMouseOver');
                El.setStyle('border', '0px');
            });

            $$('div.clientListMouseOver').each(function(El, In)
            {
                var Animator = new Fx.Morph(El, { duration: 'short', transition: Fx.Transitions.Sine.easeInOut, link: 'cancel' });
                Animator.set('.clientListMouseOver');
                El.setStyle('background', 'transparent url(../images/clientsMenuBG.png) no-repeat scroll -230px 0px');
                //El.setStyle('padding-left', '10px');
            });
        });

        //Move Shadow to normal position
        shadowAnimator.start('left', '220px');

        //$('clientsList').setStyle('background-color', 'black');
    }
    else if (displayMode == -1) //Hide menu to sliver
    {

        if ($('ClientGallerySetControls').getChildren().length == 3)
        {
            ClientmainGalleryImageAnimator.start('width', 753);
        }
        else
        {
            ClientmainGalleryImageAnimator.start('width', 753);
        }
    
        //ClientImageGalleryAnimator.start({'width': [754]});
        $('ExpandView').setStyle("left", "8px");
        $('ExpandView').setStyle("top", "5px");
        $('ExpandView').setStyle("display", "block");
        $('ExpandView').setStyle("visibility", "visible");
        $('ExpandView').setStyle("opacity", "0");
        
        //Clean up once back
        $$('div.clientListImageHidden').each(function(El, In)
        {
            var Animator = new Fx.Morph(El, { duration: 'short', transition: Fx.Transitions.Sine.easeInOut, link: 'cancel' });
            Animator.set('.clientListImageHidden');
            var Animator = new Fx.Morph(El, { duration: 'short', transition: Fx.Transitions.Sine.easeInOut, link: 'cancel' });
            Animator.set('.clientListMouseOver');
            El.setStyle('border', '0px');
        });
        
        $$('div.clientListMouseOver').each(function(El, In)
        {
            var Animator = new Fx.Morph(El, { duration: 'short', transition: Fx.Transitions.Sine.easeInOut, link: 'cancel' });
            Animator.set('.clientListMouseOver');
            El.setStyle('background', 'transparent url(../images/clientsMenuBG.png) no-repeat scroll -230px 0px');
            //El.setStyle('padding-left', '10px');
        });
        //3 Display Open Out Button
        shadowAnimator.addEvent('complete', function()
        {
            ClientsExpandView.start("opacity", "1");

        });

        //2 Move Elements to left
        clientsListAnimator.addEvent('complete', function()
        {
            clientListAnimator2.start("padding-left", "0px");
            clientsListAnimator2.start('width', '25px');
            clientListAnimator.start('width', '30px');
            shadowAnimator.start("left", "30px");
            ClientsContentAnimator.start({
                'opacity': '1',
                'margin-left': '30px',
                'width': '720px'
            });
            if ($('ClientContentRightSide'))
            {
                ClientContentRightSideAnimator.start('left', '535px');
            }
        });

        clientsListAnimator.start("opacity", '0');
    }
}

function AnimateIconInAndIncrement()
{
    //
    var El = $$('div.clientListImageHidden')[IconDisplayPosition];
    var Animator = new Fx.Morph(El, { duration: 'short', transition: Fx.Transitions.Sine.easeOut, link: 'cancel' });
    Animator.start('.clientListImageVisible');

    ++IconDisplayPosition;
}