var currentSlide = "";

function showCereal(cerealid) {
    $("div#cereal-layer").show();
    $("div#cereal-wrapper").show();
    divtoshow = "div#box" + cerealid;
    upSlide(divtoshow);
}

function downSlide(slideName) {
    //$(slideName).css('z-index', '-1');
    //$(slideName + " div.cerealContent div.cerealbox div.boxinfo").hide();
    $(slideName).hide();
}

function upSlide(slideName) {
    $(".cbposition").each(function(){
        $(this).hide();
        //      code to switch panel to show cerealbox image and 
        //      hide the nutrition info panel
        boxId = "#" + $(this).attr("id");
        if ($(boxId + " div.cerealContent div.cerealinfo").css("display")=="block") {                    
            $(boxId + " div.cerealContent div.cerealbox div.nutritioninfo").hide();
            $(boxId + " div.cerealContent div.cerealbox div.boxinfo").show();
        }                    
    });
    $(slideName).show();
    //$(slideName + " div.cerealContent div.cerealbox div.boxinfo").show();
    //$(slideName).css('z-index', '40');
    //remove the div portion so I can take the value and set the drop down accordingly.
    value = slideName.replace("div#box", "");
    $("#postchoose").val(value);
    currentSlide = slideName;
    _gaq.push(['_trackPageview', '/cereal/'+value]);
}


/* Internet Explorer does not implement indexOf, so if you don't have it, here it is. */
if (!Array.prototype.indexOf) {
    Array.prototype.indexOf = function(elt /*, from*/)  {
        var len = this.length >>> 0;
        var from = Number(arguments[1]) || 0;
        from = (from < 0)
            ? Math.ceil(from)
            : Math.floor(from);
        if (from < 0)
        from += len;

        for (; from < len; from++) {
            if (from in this &&
                this[from] === elt)
            return from;
        }
        return -1;
    };
}


$(function() {

        //bind the change function to switch the div.
        $("#postchoose").change(function(){

                newbox = "div#box" + $(this).val();
                downSlide(currentSlide);
                upSlide(newbox);
            });

        //this switches between the cereal box and the nutritional information.
        $("a.switchpanel").click(function(){
                x = $(this).parents(".cbposition");
                boxId = "#" + x.attr("id");

                x = $(this).parent().parent();
                panelClass = "div." + x.attr("class");

                if (panelClass == "div.boxinfo") {
                    oldpanel="div.boxinfo";
                    newpanel="div.nutritioninfo";
                } else {
                    oldpanel="div.nutritioninfo";
                    newpanel="div.boxinfo";
                }

                //find the main box div and toggle the appropriate panels.
                $(boxId + " div.cerealContent div.cerealbox " + oldpanel).toggle();
                $(boxId + " div.cerealContent div.cerealbox " + newpanel).toggle();
            });

        $("img.larrow").click(function() {
                //get jquery array of all boxes
                boxesArray = $("div.cerealInformation").children();
                boxes = [];
                // use this to make a javascript array
                jQuery.each(boxesArray, function() {
                        x = "div#" + $(this).attr("id");
                        boxes.push(x);
                    });

                //locate the current box
                x = $(this).parents(".cbposition");
                boxId = "div#" + x.attr("id");
                idx = boxes.indexOf(boxId);
                //if we don't wrap around, disable the button
                if (idx == 0) {
                    idx = boxes.length - 1;
                } else  {
                    idx = idx - 1;
                }
                //switch to that element
                downSlide(currentSlide);
                upSlide(boxes[idx]);
            });

       $("img.rarrow").click(function() {
                boxesArray = $("div.cerealInformation").children();
                boxes = [];
                jQuery.each(boxesArray, function() {
                        x = "div#" + $(this).attr("id");
                        boxes.push(x);
                    });

                //x = $(this).parent().parent().parent().parent();
                x = $(this).parents(".cbposition");
                boxId = "div#" + x.attr("id");
                idx = boxes.indexOf(boxId);
                //if we don't wrap around, disable the button
                if (idx == boxes.length -1) {
                    idx = 0;
                } else {
                    idx = idx +1;
                }
                //switch to that element
                downSlide(currentSlide);
                upSlide(boxes[idx]);
            });

       //when you click on the close button, make the city div wind down and turn off the current city.
       $("#nav_close").bind('click', function(event) {              
               /*$(".cbposition").each(function(){
                    $(this).hide();
                    //      code to switch panel to show cerealbox image and 
                    //      hide the nutrition info panel
                    boxId = "#" + $(this).attr("id");
                    if ($(boxId + " div.cerealContent div.cerealinfo").css("display")=="block") {                    
                        $(boxId + " div.cerealContent div.cerealbox div.nutritioninfo").hide();
                        $(boxId + " div.cerealContent div.cerealbox div.boxinfo").show();
                    }                    
                });*/
                $("div#cereal-wrapper").hide();
                $("div#cereal-layer").hide();                
           });

});