$(document).ready(function() {
    // products: toggle different tabs
    $(".product .divTab").hide();
    $("#productDetails").show();

    // products: tab listener
    $(".product #tab>li").live("click", function() {
        $(".divTab").hide();
        $(".tab").removeClass("active")
        $(this).addClass("active")
        var target = $(this).attr("tab")
        $("#" + target).show();
    });

    // products: listener for image thumbnail click events
    $(".productImages img").live("click", function() {
        dbAJAX("/scripts/yoddle/ui.aspx?", "action=getasset&cid=" + $(this).attr("thumbof") + "&type=image", displayasset);
    });

    // products: since user's don't have their choice of videos, we don't need to handle any thumbnail events
    //$(".videoDemo img").live("click", function() {
    //    dbAJAX("/scripts/yoddle/ui.aspx?", "action=getasset&cid=" + $(this).attr("thumbof") + "&type=video", displayasset);
    //});

    // forms: button listener
    $("form.formwrapper input[type='submit']").live("click", function() {
        var entity = $(this).parents("form").find("input[name='formentity']").attr("value");
        var val = $(this).attr("name");
        submitForm(entity, val);
        return false;
    });

    // forms: various functionality
    anytimeEventsAndListeners();

    // forms: toggle billing address fields
    $("form #billingcheckID").live("click", function() {
        if ($(this).is(':checked')) {
            $(".orderForm form div#billingAddr").show();
        } else {
            $(".orderForm form div#billingAddr").hide();
        }
    });


});

// products: replaces slideshow div with new image
function displayasset(r) {
    var ra = r.split("||");
    if (ra[0] == "OK") {
        $(".product div#productSlideshow").html(ra[1]);
    }
}

function refreshResults(r) {
    var ra = r.split("||");

    if (ra[0] == "OK") {
        $("#lit_searchResults").html(ra[1]);
        $("#pagination").html(ra[2]);
        $("#searchResults").show();
    }
}
function pageResults(r) {
    var ra = r.split("||");

    if (ra[0] == "OK") {
        $("#lit_searchResults").html(ra[1]);
        $("#pagination").html(ra[2]);
        $("#searchResults").show();
    }
}

function submitForm(theToken, val) {
    var f = $("#" + theToken);
    var serializedForm = f.serialize();
    var action = "formsprocessor.aspx";
    $.post(action, serializedForm, webFormHandler);
}

function webFormHandler(r) {
    var ra = r.split("||");
    if ((ra[0] == "OK") || (ra[0] == "HasErrors")) {
        if ((ra[2].charAt(0) == "@") && (ra[0] == "OK")) {
            window.location.href = ra[2].substr(1) + "?" + ra[1];
        } else {
            var f = "#" + ra[1]
            $(f).html(ra[2]);
        }
    }
    anytimeEventsAndListeners();
    return false;
}

// listeners defined in document.ready() cannot target their elements after a form is returned
// via ajax.  Events + listeners that need to remain active after an ajax write can be added here
function anytimeEventsAndListeners() {
    
    // order2: toggle billing addr fields
    if ($(".orderForm form #billingcheckID").is(':checked')) {
        $(".orderForm form div#billingAddr").show();
    } else {
        $(".orderForm form div#billingAddr").hide();
    }

    // order1: toggle default textbox text
    $("input:text, textarea").focus(function() {
        if ($(this).attr("value") == $(this).attr("example")) {
            $(this).attr("value", "");
        }
    });
    $("input:text, textarea").blur(function() {
        var example = $(this).attr("example");
        if ($(this).attr("value") == "") {
            $(this).attr("value", example);
        }
    });

    // order & trial forms: rewrite breadcrumbs 
    if ($(".orderForm form#order1 input[name='step']").val() == 1) {
        $("div.orderSteps").html("<div class='orderSteps'><span class='current'>Product Selection</span> > <span>Delivery &amp; Billing</span> > <span>Order Confirmation</span></div>");
    }
    if ($(".orderForm form#order1 input[name='step']").val() == 2) {
        $("div.orderSteps").html("<div class='orderSteps'><span>Product Selection</span> > <span class='current'>Delivery &amp; Billing</span> > <span>Order Confirmation</span></div>");
    }
    if ($(".orderForm form#trial1 input[name='step']").val() == 1) {
        $("div.orderSteps").html("<div class='orderSteps'><span class='current'>Product Selection</span> > <span>Delivery Information</span> > <span>Order Confirmation</span></div>");
    }
    if ($(".orderForm form#trial1 input[name='step']").val() == 2) {
        $("div.orderSteps").html("<div class='orderSteps'><span>Product Selection</span> > <span class='current'>Delivery Information</span> > <span>Order Confirmation</span></div>");
    }
 }