/* 
 * js para slider de VIVE ICA . Hecho por: karmi / 8 de abril del 2011
 */

$(document).ready(function(){
    $("#hiddenFlag").val(1);
    //Paso 1: Inhabilitar la flecha izquierda y dar funcionalidad a la derecha para que despace
    $("#divArrowLeft").css('display','none');


    //////////////////////// mover hacia la derecha (avanzar)
    $("#divArrowRight").live("click",function(e){
        //$("#sliderOver").css( 'height','145px');
        var firstLayer= $("#divBackFirst").css("margin-left");
        var secondLayer= $("#divBackSecond").css("margin-left");
        var thirdLayer= $("#divBackThird").css("margin-left");
        var fourthLayer= $("#divBackFourth").css("margin-left");
        var boxesContainer= $("#divBoxesContainer").css("margin-left");
        var currentFlag = $("#hiddenFlag").val();
        
        if(currentFlag == 1){
            $("#divDittos ul li:first a").click();
        }
        
        if(currentFlag==3){
            $("#divArrowRight").css('display','none');
        }
        var goToFlag=parseInt(currentFlag)+1;
        $("#hiddenFlag").val(goToFlag);
        switch(firstLayer){
            case '0%':
            case '0px':
                firstLayer=-12;
                var firstLayerLabel=firstLayer+"%";
                secondLayer=-65;
                var secondLayerLabel=secondLayer+"%";
                thirdLayer=-65;
                var thirdLayerLabel=thirdLayer+"%";
                fourthLayer=-1092-1453;
                var fourthLayerLabel=fourthLayer+"px";
                boxesContainer=-100;
                var boxesContainerLabel=boxesContainer+"%";
                $("#popUpMenu2Up").attr("id","popUpMenu2");
                $("#popUpMenu1Up").attr("id","popUpMenu1");
                $("#popUpMenu3Up").attr("id","popUpMenu3");
                $("#popUpMenu4Up").attr("id","popUpMenu4");
                $("#popUpMenu5Up").attr("id","popUpMenu5");
                //$("#sliderOver").fadeIn(1000);

                break;
            default:
                
                //POSITIVOS
                if(currentFlag<goToFlag){
                    repeticiones=goToFlag-1;
                    switch(repeticiones+1){
                        case 2:
                            $("#popUpMenu2").attr("id","popUpMenu2Up");
                            $("#popUpMenu1Up").attr("id","popUpMenu1");
                            $("#popUpMenu3Up").attr("id","popUpMenu3");
                            $("#popUpMenu4Up").attr("id","popUpMenu4");
                            $("#popUpMenu5Up").attr("id","popUpMenu5");
                            //$("#sliderOver").fadeOut(1000);

                            break;     
                        case 3:
                            $("#popUpMenu3").attr("id","popUpMenu3Up");
                            $("#popUpMenu1Up").attr("id","popUpMenu1");
                            $("#popUpMenu2Up").attr("id","popUpMenu2");
                            $("#popUpMenu4Up").attr("id","popUpMenu4");
                            $("#popUpMenu5Up").attr("id","popUpMenu5");
                            //$("#sliderOver").fadeOut(1000);
                            break;
                        case 4:
                            $("#popUpMenu4").attr("id","popUpMenu4Up");
                            $("#popUpMenu1Up").attr("id","popUpMenu1");
                            $("#popUpMenu2Up").attr("id","popUpMenu2");
                            $("#popUpMenu3Up").attr("id","popUpMenu3");
                            $("#popUpMenu5Up").attr("id","popUpMenu5");
                            //$("#sliderOver").fadeOut(1000);
                            break;
                        case 5:
                            $("#popUpMenu5").attr("id","popUpMenu5Up");
                            $("#popUpMenu1Up").attr("id","popUpMenu1");
                            $("#popUpMenu2Up").attr("id","popUpMenu2");
                            $("#popUpMenu3Up").attr("id","popUpMenu3");
                            $("#popUpMenu4Up").attr("id","popUpMenu4");
                            //$("#sliderOver").fadeOut(1000);
                            break;
                    }
                    firstLayer=-12*repeticiones;
                    var firstLayerLabel=firstLayer+"%";
                    secondLayer=-65*repeticiones;
                    var secondLayerLabel=secondLayer+"%";
                    thirdLayer=-65*repeticiones;
                    var thirdLayerLabel=thirdLayer+"%";
                    fourthLayer=-1092+(repeticiones*-1453);
                    var fourthLayerLabel=fourthLayer+"px";
                    boxesContainer=-100*repeticiones;
                    var boxesContainerLabel=boxesContainer+"%";
                  
                }

                break;
        }

        e.preventDefault();
        $("#divBackFirst").animate({
            'margin-left': firstLayerLabel
        },2100);

        $("#divBackSecond").animate({
            'margin-left': secondLayerLabel
        },2200);
        $("#divBackThird").animate({
            'margin-left': thirdLayerLabel
        },2200);

        $("#divBackFourth").animate({
            'margin-left': fourthLayerLabel
        },2000);
        $("#divBoxesContainer").animate({
            'margin-left': boxesContainerLabel
        },2000);


        $("#divArrowLeft").css('display','block');

    })


    //////////////////////// mover hacia la izquierda (retroceder)
    $("#divArrowLeft").live("click",function(e){
        // $("#sliderOver").css( 'height','145px');
        var firstLayer= $("#divBackFirst").css("margin-left");
        var secondLayer= $("#divBackSecond").css("margin-left");
        var thirdLayer= $("#divBackThird").css("margin-left");
        var fourthLayer= $("#divBackFourth").css("margin-left");
        var boxesContainer= $("#divBoxesContainer").css("margin-left");
        var currentFlag = $("#hiddenFlag").val();
        if(currentFlag==2){
            $("#divArrowLeft").css('display','none');
        }
        var goToFlag=parseInt(currentFlag)-1;
        $("#hiddenFlag").val(goToFlag);
        //NEGATIVOS
        if(currentFlag>goToFlag){
            repeticiones=currentFlag-goToFlag;
          
            switch(currentFlag-1){
                case 1:

                    $("#popUpMenu1").attr("id","popUpMenu1Up");
                    $("#popUpMenu2Up").attr("id","popUpMenu2");
                    $("#popUpMenu3Up").attr("id","popUpMenu3");
                    $("#popUpMenu4Up").attr("id","popUpMenu4");
                    $("#popUpMenu5Up").attr("id","popUpMenu5");
                    $("#divArrowLeft").css('display','none');
                    //$("#sliderOver").fadeOut(1000);
                    break;
                case 2:
                    $("#popUpMenu2").attr("id","popUpMenu2Up");
                    $("#popUpMenu1Up").attr("id","popUpMenu1");
                    $("#popUpMenu3Up").attr("id","popUpMenu3");
                    $("#popUpMenu4Up").attr("id","popUpMenu4");
                    $("#popUpMenu5Up").attr("id","popUpMenu5");
                    //$("#divDittos ul li:first a").click();
                    //$("#sliderOver").fadeIn(1000);
                    break;
                case 3:
                    $("#popUpMenu3").attr("id","popUpMenu3Up");
                    $("#popUpMenu1Up").attr("id","popUpMenu1");
                    $("#popUpMenu2Up").attr("id","popUpMenu2");
                    $("#popUpMenu4Up").attr("id","popUpMenu4");
                    $("#popUpMenu5Up").attr("id","popUpMenu5");
                    $("#divArrowRight").css('display','block');
                   //$("#sliderOver").fadeOut(1000);
                    break;
                case 4:
                    $("#popUpMenu4").attr("id","popUpMenu4Up");
                    $("#popUpMenu1Up").attr("id","popUpMenu1");
                    $("#popUpMenu2Up").attr("id","popUpMenu2");
                    $("#popUpMenu3Up").attr("id","popUpMenu3");
                    $("#popUpMenu5Up").attr("id","popUpMenu5");
                   
                    //$("#sliderOver").fadeOut(1000);
                    break;
                case 5:
                    $("#popUpMenu5").attr("id","popUpMenu5Up");
                    $("#popUpMenu1Up").attr("id","popUpMenu1");
                    $("#popUpMenu2Up").attr("id","popUpMenu2");
                    $("#popUpMenu3Up").attr("id","popUpMenu3");
                    $("#popUpMenu4Up").attr("id","popUpMenu4");
                    //$("#sliderOver").fadeOut(1000);
                    break;
            }

            firstLayer=(-12*goToFlag)+12;
            var firstLayerLabel=firstLayer+"%";
            secondLayer=(-65*goToFlag)+65;
            var secondLayerLabel=secondLayer+"%";
            thirdLayer=(-65*goToFlag)+65;
            var thirdLayerLabel=thirdLayer+"%";
            fourthLayer=-1092+(-1453*(goToFlag-1));
            var fourthLayerLabel=fourthLayer+"px";
            //alert(fourthLayerLabel);
            boxesContainer=(-100*goToFlag)+100;
            var boxesContainerLabel=boxesContainer+"%";


        }


        e.preventDefault();
        $("#divBackFirst").animate({
            'margin-left': firstLayerLabel
        },2100);

        $("#divBackSecond").animate({
            'margin-left': secondLayerLabel
        },2200);
        $("#divBackThird").animate({
            'margin-left': thirdLayerLabel
        },2200);

        $("#divBackFourth").animate({
            'margin-left': fourthLayerLabel
        },2000);
        $("#divBoxesContainer").animate({
            'margin-left': boxesContainerLabel
        },2000);



    })

})