//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 = '/resources/images/clients/';
GalleryImageThumbPath = GalleryImagePath + 'clientThumbs/';
var GalleryImages = new Array();

//Create array of images for slideshow!

/// <reference path="../images/clients/Alight-Client-Bentley-3.jpg" />

/// <reference path="../images/clients/Alight-Client-TMD-Friction-6.jpg" />

/// <reference path="../images/clients/Alight-Client-Coors-4.jpg" />

/// <reference path="../images/clients/Alight-Client-GoIndustry-DoveBid-5.jpg" />

/// <reference path="../images/clients/Alight-Client-JCB-1.jpg" />

/// <reference path="../images/clients/Alight-Client-The-Childrens-Society-2.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
            $$('#clientsList').setStyle("position", "relative");            
            ChangeClientsDisplayMode(1);
            GlobalDisplayMode = 1;
            $$("#RetractView").morph({ "display": "block" });
        }
    });

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

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

    $('listView').addEvents({
        'click': function() {
            $$('#clientsList').setStyle("position", "absolute");
            //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;
                });
                $$("#IconViewToListView").morph({ "display": "block" });
                $$("#RetractView").morph({ "display": "none" });
                clientListAnimator.start("opacity", "0");
            }
            else {
                //Clear Timer Events
                $clear(iconDisplaytimer);
                IconDisplayPosition = 1000;

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

        }
    });

    $('RetractView').addEvents({
        'click': function() {
            $$('#clientsList').setStyle("position", "absolute");
            $clear(iconDisplaytimer);
            $$("#IconViewToListView").morph({ "display": "block" });
            $$("#RetractView").morph({ "display": "none" });
            ChangeClientsDisplayMode(0);
            GlobalDisplayMode = 0;
        }
    });

    $('IconViewToListView').addEvents({
        'click': function() {
            $$('#clientsList').setStyle("position", "absolute");
            $clear(iconDisplaytimer);
            $$("#IconViewToListView").morph({ "display": "none" });
            $$("#RetractView").morph({ "display": "block" });
            ChangeClientsDisplayMode(-1);
            GlobalDisplayMode = -1;
        }
    });

    var URL = location.href;
    URL = URL.toLowerCase();


    URL = URL.replace("http://localhost:2259", "");
    URL = URL.replace("http://www.wearealight.com", "");
    URL = URL.replace("http://www.wearealight.co.uk", "");

    //Highlight correct client
    $("clientList").getChildren().each(function(e, i, a) {

        var urltomatch = e.getFirst('.clientListMouseOver').getFirst("a").getProperty("href").toLowerCase();
        if (urltomatch == URL) {
            e.setStyle("background-color", "#f2f2f2");
        }
    });
}
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
    {

        $$("#IconViewToListView").morph({ "display": "none" });
        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");
            $$("#RetractView").setStyle( "display", "none" );
            //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(/resources/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(/resources/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' });

    var URL = location.href;
    URL = URL.toLowerCase();
    URL = URL.replace("http://localhost:2259", "");
    URL = URL.replace("http://www.wearealight.com", "");
    URL = URL.replace("http://www.wearealight.co.uk", "");

    if (El.getFirst("a").getProperty("href").toLowerCase() == URL) {
        //Selected CSS class
        Animator.start('.clientListImageVisibleSelected');
        El.getParent().getFirst(".clientListMouseOver").setStyle("width", 230);
    }
    else {
        //Defualt CSS class
        Animator.start('.clientListImageVisible');
    }

    ++IconDisplayPosition;
}