function showAllCereals() {
    $('featuredCereals').hide();
    $('allCereals').show();
}

function showFeaturedCereals() {
    $('cerealDetail').hide();
    $('allCereals').hide();
    $('featuredCereals').show();
}

function showRecipe(url) {
    var params = new Hash(url.toQueryParams());
    var cereal = params.get("cereal");
    if ( cereal != null) {
        switch(cereal) {
            case "trix": $('trixRecipe').show();
                         break;
            case "ctc" : $('ctcRecipe').show();
                         break;
            case "cp" : $('cpRecipe').show();
                        break;
            case "lc" : $('lcRecipe').show();
                        break;
        }
    }
}

function showCerealPopup(cereal) {
    $('cerealDetail').hide();
    var name = "";
    var url = "";
    var top = "";
    var left = "";
    switch(cereal) {
        case "kix": name = "Kix";
                    url = "nutrition/kix.html";
                    top = "165px";
                    left = "425px";
                    break;
        case "clc": name = "Chocolate Lucky Charms";
                    url = "nutrition/clc.html";
                    top = "160px";
                    left = "350px";
                    break;
        case "gg": name = "Golden Grahams";
                    url = "nutrition/gg.html";
                    top = "170px";
                    left = "500px";
                    break;
        case "rp": name = "Reese's Puffs";
                    url = "nutrition/rp.html";
                    top = "170px";
                    left = "600px";
                    break;
        case "cc": name = "Cookie Crisp";
                    url = "nutrition/cc.html";
                    top = "165px";
                    left = "675px";
                    break;
        case "dccc": name = "Double Chocolate Cookie Crisp";
                    url = "nutrition/dccc.html";
                    top = "160px";
                    left = "750px";
                    break;
        case "scc": name = "Sprinkles Cookie Crisp";
                    url = "nutrition/scc.html";
                    top = "160px";
                    left = "750px";
                    break;
    }
    $('cerealName').innerHTML = name;
    $('cerealLink').href = url;
    $('cerealDetail').style.top = top;
    $('cerealDetail').style.left = left;
    $('cerealDetail').show();
}

function hideCerealPopup(e) {
    var nextElement = "";
    if( e.relatedTarget != null) nextElement = e.relatedTarget;
    else nextElement = e.fromElement;
    if (nextElement.id != "cerealDetail" && nextElement.id != "cerealName" && nextElement.id != "cerealLink")
        $('cerealDetail').hide();
}

function showCommercialPopup(root) {
    $('commercial').show();
    var so = new SWFObject('flash/video_player.swf', 'commercialSWF', '350', '320', '8', '');
    so.addVariable('skinPath', root + 'flash/video_player_skin.swf');
    so.addVariable('flvPath','rtmp://genmills.fcod.llnwd.net/a548/o1/GrowUpStrong/MeasureRev2Liftedit.flv');
    addSWFObject(so, "commercial");
}

// UTILITY FUNCTIONS

// Add event listeners for imgElem to create rollover effect with image at url overSrc on mouseover,
// and outSrc on mouseout. imgElem can be image object or id of image object.
function addRolloverImage(imgElem, outSrc, overSrc) {
	if ($(imgElem) != null) {
		$(imgElem).observe('mouseover', function(event) { Event.element(event).src = overSrc });
    	$(imgElem).observe('mouseout', function(event) { Event.element(event).src = outSrc });
    }
}

//Convenience function to perform repeated addParam calls and write call for SWF Objects
function addSWFObject(obj, id) {
    obj.addParam('scale', 'exactfit');
    obj.addParam('wmode', 'transparent')
    obj.addParam('menu', 'false');
    obj.write(id)
}