YAHOO.namespace('IEDesign');

YAHOO.IEDesign.Accordion = function(){


    var spin = null;
    var click = 0;

    var buttons = null;

    var turn = 1;
    var arrowheight = null;

    var $E, $D;

    var tabin = null;
    var tabout = null;
    var arrowout = null;
    var arrowin = null;
    var arrow = null;


    function  timer(){

        $E = YAHOO.util.Event;
        $D = YAHOO.util.Dom;
        $ = $D.get;

        var arrowheight = 20;

        spin = setInterval(function(){

            domove();

        }, 10000);
    }

    function domove(){


        //set the 2nd image
        if(turn == 4){
            turn = 0;
        }
        temp = 'url(../img/placeholders/slab' + (turn+1) + '.png)';

        //check if we need to fade it out or bring it back in
        if(turn%2){
            img = 'img_2';
            imo = 0;
        }else{
            img = 'img_1';
            imo = 1;
        }
        //set the other panel first
        YAHOO.util.Dom.setStyle(img, 'background-image', temp);

        var imagemove = new YAHOO.util.Anim('img_1', {
            opacity: {
                to: imo
            }
        }, 5, YAHOO.util.Easing.easeBothStrong);



        //get the buttons
        if(turn == 0){
            buttona = $D.getElementsByClassName('buttons')[0].getElementsByTagName('li')[3].getElementsByTagName('a')[0];
            buttonb = $D.getElementsByClassName('buttons')[0].getElementsByTagName('li')[0].getElementsByTagName('a')[0];
        }else{
            buttona = $D.getElementsByClassName('buttons')[0].getElementsByTagName('li')[turn-1].getElementsByTagName('a')[0];
            buttonb = $D.getElementsByClassName('buttons')[0].getElementsByTagName('li')[turn].getElementsByTagName('a')[0];
        }


        //get the arrow :D
        arrow = $D.getElementsByClassName('arrow')[0];

        //get the link panels
        links = $D.getElementsByClassName('accordion_links');

        if(turn == 0){
            linka = links[3];
            linkb = links[0];
        }else{
            linka = links[turn-1];
            linkb = links[turn];
        }

        //setup the animation

        quote = $D.getElementsByClassName('quote')[0];
        quotetick = $D.getElementsByClassName('accordion-bottom-left')[0];


        switch(turn){
            case 0:
                quotechange = new YAHOO.util.ColorAnim(quote, {backgroundColor: { to: '#F4440C' } },2);
                quotetickchange = new YAHOO.util.ColorAnim(quotetick, {backgroundColor: { to: '#B63008' } },2);
                break;
            case 1:
                quotechange = new YAHOO.util.ColorAnim(quote, {backgroundColor: { to: '#ED1C24' } },2);
                quotetickchange = new YAHOO.util.ColorAnim(quotetick, {backgroundColor: { to: '#A91419' } },2);
                break;
            case 2:
                quotechange = new YAHOO.util.ColorAnim(quote, {backgroundColor: { to: '#00AAB5' } },2);
                quotetickchange = new YAHOO.util.ColorAnim(quotetick, {backgroundColor: { to: '#00787F' } },2);
                break;
            case 3:
                quotechange = new YAHOO.util.ColorAnim(quote, {backgroundColor: { to: '#6E3188' } },2);
                quotetickchange = new YAHOO.util.ColorAnim(quotetick, {backgroundColor: { to: '#2B1138' } },2);
                break;
        }



        


        arrowout = new YAHOO.util.Anim(arrow, {
            opacity: {
                to: 0
            }
        }, 1, YAHOO.util.Easing.easeBothStrong);


        arrowin = new YAHOO.util.Anim(arrow, {
            opacity: {
                to: 1
            }
        }, 1, YAHOO.util.Easing.easeBothStrong);


        tabin = new YAHOO.util.Anim(buttona, {
            paddingRight: {
                to: 0
            }
        }, 1, YAHOO.util.Easing.backOut);

        tabout = new YAHOO.util.Anim(buttonb, {
            paddingRight: {
                to: 12
            }
        }, 1, YAHOO.util.Easing.backOut);


        linkin = new YAHOO.util.Anim(linkb, {
            opacity: {
                to: 1
            }
        }, 3, YAHOO.util.Easing.backOut);

        linkout = new YAHOO.util.Anim(linka, {
            opacity: {
                to: 0
            }
        }, 3, YAHOO.util.Easing.backOut);


        //lets actually move the stuff now
        arrowout.onComplete.subscribe(imagemove.animate());
        arrowout.onComplete.subscribe(quotechange.animate());
        quotechange.onStart.subscribe(quotetickchange.animate());
        arrowout.onComplete.subscribe(setTimeout("YAHOO.IEDesign.Accordion.arrowinf();",3000));
        imagemove.onStart.subscribe(setTimeout("YAHOO.IEDesign.Accordion.tabinf();",1000));
        imagemove.onStart.subscribe(setTimeout("YAHOO.IEDesign.Accordion.taboutf();",2000));

        tabin.onComplete.subscribe(function(){
            $D.setStyle(linka,'display','none');
        });

        //tabout.onStart.subscribe(function(){$D.setStyle(linkb,'display','');});

        //imagemove.onStart.subscribe(setTimeout("YAHOO.IEDesign.Accordion.linkoutf();",3000));

        //imagemove.onComplete.subscribe(setTimeout("YAHOO.IEDesign.Accordion.linkinf();",3000));


        tabin.onComplete.subscribe(linkout.animate());
        tabout.onComplete.subscribe(function(){
            $D.setStyle(linkb,'display','');linkin.animate();
        });

        // console.log('fade');

        arrowout.animate()

          

        turn = (turn+1);
            
    }





    function doremove(clicked){

        //console.log(turn);
        //console.log(clicked);


        var click = clicked;


        temp = 'url(../img/placeholders/slab' + (click+1) + '.png)';

        //check if we need to fade it out or bring it back in
        if(click%2){
            img = 'img_2';
            imo = 0;
        }else{
            img = 'img_1';
            imo = 1;
        }
        //set the other panel first
        YAHOO.util.Dom.setStyle(img, 'background-image', temp);

        var imagemove = new YAHOO.util.Anim('img_1', {
            opacity: {
                to: imo
            }
        }, 5, YAHOO.util.Easing.easeBothStrong);


            
        //get the buttons
        if(turn == 0){
            buttona = $D.getElementsByClassName('buttons')[0].getElementsByTagName('li')[3].getElementsByTagName('a')[0];
            buttonb = $D.getElementsByClassName('buttons')[0].getElementsByTagName('li')[0].getElementsByTagName('a')[0];
        }else{
            buttona = $D.getElementsByClassName('buttons')[0].getElementsByTagName('li')[turn-1].getElementsByTagName('a')[0];
            buttonb = $D.getElementsByClassName('buttons')[0].getElementsByTagName('li')[click].getElementsByTagName('a')[0];
        }


        //get the arrow :D
        arrow = $D.getElementsByClassName('arrow')[0];

        //get the link panels
        links = $D.getElementsByClassName('accordion_links');

        if(turn == 0){
            linka = links[3];
            linkb = links[click];
        }else{
            linka = links[turn-1];
            linkb = links[click];
        }

        //setup the animation

           quote = $D.getElementsByClassName('quote')[0];
        quotetick = $D.getElementsByClassName('accordion-bottom-left')[0];


        switch(click){
            case 0:
                quotechange = new YAHOO.util.ColorAnim(quote, {backgroundColor: { to: '#F4440C' } },2);
                quotetickchange = new YAHOO.util.ColorAnim(quotetick, {backgroundColor: { to: '#B63008' } },2);
                break;
            case 1:
                quotechange = new YAHOO.util.ColorAnim(quote, {backgroundColor: { to: '#ED1C24' } },2);
                quotetickchange = new YAHOO.util.ColorAnim(quotetick, {backgroundColor: { to: '#A91419' } },2);
                break;
            case 2:
                quotechange = new YAHOO.util.ColorAnim(quote, {backgroundColor: { to: '#00AAB5' } },2);
                quotetickchange = new YAHOO.util.ColorAnim(quotetick, {backgroundColor: { to: '#00787F' } },2);
                break;
            case 3:
                quotechange = new YAHOO.util.ColorAnim(quote, {backgroundColor: { to: '#6E3188' } },2);
                quotetickchange = new YAHOO.util.ColorAnim(quotetick, {backgroundColor: { to: '#2B1138' } },2);
                break;
        }


        arrowout = new YAHOO.util.Anim(arrow, {
            opacity: {
                to: 0
            }
        }, 1, YAHOO.util.Easing.easeBothStrong);


        arrowin = new YAHOO.util.Anim(arrow, {
            opacity: {
                to: 1
            }
        }, 1, YAHOO.util.Easing.easeBothStrong);


        tabin = new YAHOO.util.Anim(buttona, {
            paddingRight: {
                to: 0
            }
        }, 1, YAHOO.util.Easing.backOut);

        tabout = new YAHOO.util.Anim(buttonb, {
            paddingRight: {
                to: 12
            }
        }, 1, YAHOO.util.Easing.backOut);


        linkin = new YAHOO.util.Anim(linkb, {
            opacity: {
                to: 1
            }
        }, 3, YAHOO.util.Easing.backOut);

        linkout = new YAHOO.util.Anim(linka, {
            opacity: {
                to: 0
            }
        }, 3, YAHOO.util.Easing.backOut);


        //lets actually move the stuff now
        arrowout.onComplete.subscribe(imagemove.animate());
        arrowout.onComplete.subscribe(quotechange.animate());
        quotechange.onStart.subscribe(quotetickchange.animate());
        arrowout.onComplete.subscribe(setTimeout("YAHOO.IEDesign.Accordion.arrowinrf("+ click +");",3000));
        imagemove.onStart.subscribe(setTimeout("YAHOO.IEDesign.Accordion.tabinf();",1000));
        imagemove.onStart.subscribe(setTimeout("YAHOO.IEDesign.Accordion.taboutf();",2000));

        tabin.onComplete.subscribe(function(){
            $D.setStyle(linka,'display','none');
            //console.log('getting here');
        });

        //tabout.onStart.subscribe(function(){$D.setStyle(linkb,'display','');});

        //imagemove.onStart.subscribe(setTimeout("YAHOO.IEDesign.Accordion.linkoutf();",3000));

        //imagemove.onComplete.subscribe(setTimeout("YAHOO.IEDesign.Accordion.linkinf();",3000));


        tabin.onComplete.subscribe(linkout.animate());
        tabout.onComplete.subscribe(function(){
            $D.setStyle(linkb,'display','');linkin.animate();
        });

        // console.log('fade');

        arrowout.animate()


        turn = (click + 1);

        click = (0);

        timer();
            

    }




    function init() {

        $E = YAHOO.util.Event;
        $D = YAHOO.util.Dom;
        $ = $D.get;

        listners();

        timer();

    }

    function listners(){
        //get the buttons div, and all the li tags
        var butts = $D.getElementsByClassName('buttons')[0].getElementsByTagName('li');

        //foreach button set a listner
        
        $E.on(butts, "click", function(e){

            $E.stopEvent(e); //stop event
            
            tabclick(e); //fire off a tab click

            
        }
    );
    }

    function tabclick(e){

        var target = $E.getTarget(e);

        purgereset(target);

    }


    function purgereset(target){

        clearInterval(spin);

        YAHOO.util.Event.purgeElement(arrowout, true);

        //need to work out whats been clicked

        switch(target.className){
            case"red":
                var click = 0;
                break;
            case"green":
                var click = 1;
                break;
            case"yellow":
                var click = 2;
                break;
            case"teal":
                var click = 3;
                break;
        }

        doremove(click);

    }

    function linkinf(){
        //console.log('commingout');
        $D.setStyle(linkb,'display','');
    }

    function linkoutf(){
        //console.log('going in');
        $D.setStyle(linka,'display','none');
    }



    function tabinf(){

        tabin.animate();

    }

    function taboutf(){

        tabout.animate();

    }

    function arrowinf(){




        arrowheight = $D.getStyle(arrow,'top');
        arrowheight = parseInt(arrowheight);


        if(turn == 1){
            var arrowheight= 20;
        }else{
            var arrowheight = arrowheight + 50;
        }

        $D.setStyle(arrow,'top',arrowheight+'px');

        arrowin.animate();

 

    }


    function arrowinrf(click){

        arrowheight = $D.getStyle(arrow,'top');
        arrowheight = parseInt(arrowheight);

        //console.log(click);


        switch(parseInt(click))
        {
            case 0:
                var arrowheight = 20;
                break;
            case 1:
                var arrowheight = 70;
                break;
            case 2:
                var arrowheight = 120;
                break;
            case 3:
                var arrowheight = 170;
                break;
            default:
                var arrowheight = 20;
        }



        $D.setStyle(arrow,'top',arrowheight+'px');

        arrowin.animate();



    }


    return {
        init: init,
        tabinf: tabinf,
        taboutf: taboutf,
        arrowinf: arrowinf,
        arrowinrf: arrowinrf,
        linkinf: linkinf,
        linkoutf: linkoutf
    }

}();
/*
var loader = new YAHOO.util.YUILoader({
    require: ["utilities"],

    onSuccess: function(o) {
*/
        var $E = YAHOO.util.Event;
        var $D = YAHOO.util.Dom;
        var $ = $D.get;

        if($D.getElementsByClassName('accordion').length > 0){
            YAHOO.IEDesign.Accordion.init();
        }
/*    }
});

loader.insert();
*/