jQuery(function($) {
    
    var TIME_BETWEEN_TRANSITIONS = 3500;
    var TIME_FROM_PAGE_LOAD_PLAY = 5000;
    var TIME_ANIMATE_OUT         =  1200;
    var TIME_ANUMATE_IN          = 1000;
    var MOBILE_ANIMATE_OUT       = 1200;
    var MOBILE_ANIMATE_IN        = 1000;
    var PAGE_LOAD_TIME           = 1200;
    var IMAGE_SIZE               =  375;
    var CONTROL_DIM_VALUE        = 0.4;
  
    var bStartPlaying = false;
    var nextPanelNum  = 1;
    var numPanels = $(".panel-wrapper .panel").length;
    var bTransitioning   = false;
    var bDimFirstControl = false;
    var bDimPrevControl  = false;
    var bDimNextControl  = false;
    var bDimLastControl  = false;
    var theAnimateOutTime = TIME_ANIMATE_OUT;
    var theAnimateInTime  = TIME_ANUMATE_IN;
    var theImageSize      = IMAGE_SIZE;
    var bIsMobileClient = navigator.userAgent.toLowerCase().match(/mobile/) == "mobile";
    var bIsMSIE         = navigator.userAgent.toLowerCase().match(/msie/) == "msie";

    /* Adjust the wrapper to collapsed as the photos are moved into place */
    $('.lookbook_wrapper').css({"overflow" : "hidden"});
    
    /* Define fadein/fadeout based upon if mobile device or desktop */
    if (bIsMobileClient) {
        theAnimateInTime  = MOBILE_ANIMATE_IN;
        theAnimateOutTime = MOBILE_ANIMATE_OUT;
    }
    else if ($("body").attr("class") == "IE7") {
        theAnimateInTime  = 10;
        theAnimateOutTime = 100;
        theImageSize += 3;         // fudge factor - must be a margin setting somewhere
    }

     
    /* Stack the panels on top of each other */
    $(".panel-wrapper .panel").panel({PANEL_ANIMATE_OUT: theAnimateOutTime,
                                      PANEL_ANIMATE_IN:  theAnimateInTime,
                                      FULL_SIZE_IMAGE_HEIGHT: theImageSize,
                                      CALLBACK : TransitionCompete});
    
    /* Set the opacity to the left two lookbook controls to a dim state */
    CheckEndPointAndApplyDim();
                   
    /* Force the Play Button after a given time from the page load */
    $('.lookbook_controls').everyTime(TIME_FROM_PAGE_LOAD_PLAY, "InitTime", InitDelayComplete);
    
    function InitDelayComplete()
    {
        $(this).stopTime("InitTime");
        $(".lookbook_controls .lookbook_controls_play").trigger("click");
    }
    
    /* Apply Diming to the end points */
    $(".lookbook_controls .lookbook_controls_first").mouseenter(function() {
        var theCursor = (bDimFirstControl == false) ? "pointer" : "auto";
        $(this).css({"cursor": theCursor});
    });        
    
    $(".lookbook_controls .lookbook_controls_prev").mouseenter(function() {
        var theCursor = (bDimPrevControl == false) ? "pointer" : "auto";
        $(this).css({"cursor": theCursor});
    });
    
    $(".lookbook_controls .lookbook_controls_next").mouseenter(function() {
        var theCursor = (bDimNextControl == false) ? "pointer" : "auto";
        $(this).css({"cursor": theCursor});
    });
    
    $(".lookbook_controls .lookbook_controls_last").mouseenter(function() {
        var theCursor = (bDimLastControl == false) ? "pointer" : "auto";
        $(this).css({"cursor": theCursor});
    });
    
    $(".lookbook_controls .lookbook_controls_play").mouseenter(function() {
        $(this).css({"cursor": "pointer"});
    });
    
    
                  
    /* Play Button */ 
    $(".lookbook_controls .lookbook_controls_play").click(function() {
        if (bStartPlaying == false) {
            bStartPlaying = true;
            $(this).find("img").attr("src", "images/look_Pause.gif");
            PerformTransition();
        } else {
            bStartPlaying = false;
            $(this).find("img").attr("src", "images/look_Play.gif");
        }
    });
    
    /* Next Button */
    $(".lookbook_controls .lookbook_controls_next").click(function() {
        if (bTransitioning == false && bDimNextControl == false) {                 
            FinishControlCommon();
        }
    });
    
    /* Last Button */
    $(".lookbook_controls .lookbook_controls_last").click(function() {
        if (bTransitioning == false && bDimLastControl == false) {
            nextPanelNum = numPanels - 1;
            FinishControlCommon();
        }
    });
  
    /* First Button */  
    $(".lookbook_controls .lookbook_controls_first").click(function() {
        if (bTransitioning == false && bDimFirstControl == false) {
            nextPanelNum = 0;
            FinishControlCommon();
        }
    });
    
    /* Prev Button */
    $(".lookbook_controls .lookbook_controls_prev").click(function() {
        if (bTransitioning == false && bDimPrevControl == false) {
            if (nextPanelNum >= 2) {
                nextPanelNum -= 2;
            }
            else {
                nextPanelNum = numPanels - 2;
            }
            FinishControlCommon();
        }
    });
    
    /* Common function that's called for the buttons on either side of Play */       
    function FinishControlCommon()
    {
        bStartPlaying = false;
        $('.lookbook_controls').stopTime("oneTime"); 
        $('.lookbook_controls .lookbook_controls_play').find("img").attr("src", "images/look_Play.gif");
        $(".panel-wrapper .panel").panel.transition(nextPanelNum);
        nextPanelNum = nextPanelNum < (numPanels - 1) ? nextPanelNum + 1 : 0;
        CheckEndPointAndApplyDim();
    };        
     
    /* Called at the end of an image Transitions */ 
    function TransitionCompete() {
        bTransitioning = false;
        $('.lookbook_controls').everyTime(TIME_BETWEEN_TRANSITIONS, "oneTime", PerformTransition );
        CheckEndPointAndApplyDim();            
    }
     
    /* Called to performed an image transition */ 
    function PerformTransition() {
        $('.lookbook_controls').stopTime("oneTime");  
        if (bStartPlaying == true) {
            bTransitioning = true;
            $(".panel-wrapper .panel").panel.transition(nextPanelNum);
            nextPanelNum = nextPanelNum < (numPanels - 1) ? nextPanelNum + 1 : 0;
        }                      
    }
    
    
    /* Performs a check on the endpoints and applies a dim if at and end point */
    function CheckEndPointAndApplyDim () {
        if (nextPanelNum == 1) {
            $(".lookbook_controls .lookbook_controls_first img").css({"opacity": CONTROL_DIM_VALUE});
            $(".lookbook_controls .lookbook_controls_prev  img").css({"opacity": CONTROL_DIM_VALUE});
            bDimFirstControl = true;
            bDimPrevControl  = true;
        }
        else {
            $(".lookbook_controls .lookbook_controls_first img").css({"opacity": 1});
            $(".lookbook_controls .lookbook_controls_prev  img").css({"opacity": 1});
            bDimFirstControl = false;
            bDimPrevControl  = false;
        }
        
        if (nextPanelNum == 0) {
            $(".lookbook_controls .lookbook_controls_next img").css({"opacity": CONTROL_DIM_VALUE});
            $(".lookbook_controls .lookbook_controls_last img").css({"opacity": CONTROL_DIM_VALUE});
            bDimNextControl  = true;
            bDimLastControl  = true;
        }
        else {
            $(".lookbook_controls .lookbook_controls_next img").css({"opacity": 1});
            $(".lookbook_controls .lookbook_controls_last img").css({"opacity": 1});
            bDimNextControl  = false;
            bDimLastControl  = false;   
        }               
    };
    
    /* This wrapper is hiden in the html file and at this point its animated in.
     *  Otherwise on a slow browser the images will be monentary seen as there are
     *  being placed.
     */ 
    if (bIsMSIE == true) {
        $('.lookbook_wrapper').show();
    } else {
        $('.lookbook_wrapper').css({"opacity" : 0}).stop().show().animate(
            {"opacity" :  1},
            {queue: false, duration: PAGE_LOAD_TIME,
            complete: function() {
                $(this).css({filter: ""});
            }
        });
    }    
    
});