var currentSlide = "";

function showCereal(cerealid) {
    $("div#cereal-wrapper").show();
    divtoshow = "div#box" + cerealid;
    upSlide(divtoshow);
    _gaq.push(['_trackPageview', '/cereal/'+cerealid]);
}

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

function upSlide(slideName) {
    $(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;
}


/* 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(){
                //why go through all this trouble? You don't want all the panels to change, just the active one.
                //x = $(this).parent().parent().parent().parent().parent();
                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();
                });
               //downSlide(currentSlide);
               $("div#cereal-wrapper").hide();
           });

});