var rollovers = [];

function createRollover(type, width) {
    //create a new rollover element
    var container = document.createElement("div");
    $("#category-container").get(0).appendChild(container);
    $(container).attr("id", "feature-icon-" + type + "-rollover");
    $(container).attr("class", "rollover-container");
    var topLeft = document.createElement("div");
    $(topLeft).attr("class", "rollover-top-left");
    container.appendChild(topLeft);
    var topRight = document.createElement("div");
    $(topRight).attr("class", "rollover-top-right");
    container.appendChild(topRight);
    var middle = document.createElement("div");
    $(middle).attr("class", "rollover-middle");
    container.appendChild(middle);
    var right = document.createElement("div");
    middle.appendChild(right);
    $(right).attr("class", "rollover-right");
    var content = document.createElement("div");
    right.appendChild(content);
    $(content).attr("class", "rollover-content");
    var bottomLeft = document.createElement("div");
    $(bottomLeft).attr("class", "rollover-bottom-left");
    container.appendChild(bottomLeft);
    var bottomRight = document.createElement("div");
    $(bottomRight).attr("class", "rollover-bottom-right");
    container.appendChild(bottomRight);
    
    //get its content
    var response = $.ajax({
        type: "POST",
        url: "/CategoryPage/FeatureIcons/AJAXContent/AJAXFeature" + type + ".aspx",
        data: "",
        success: function() {
            try {
                $(content).html(response.responseText);
                $(container).css("width", width + 60);
                $(right).css("width", width + 14);
                $(content).css("padding", "0");
                $(content).css("width", width);
                $(topLeft).css("width", width + 13);
                $(bottomRight).css("width", width - 41);
            }
            catch (e) {
            }
        }
    });
    
    //set up its positioning
    $(".feature-icon-" + type).hover(function() {
        var left = $(this).offset().left;
        var top = $(this).offset().top;
        var rollover = $("#feature-icon-" + type + "-rollover");
        $(rollover).css("left", left);
        $(rollover).css("top", top - $(rollover).height());
        $(rollover).css("z-index", "10");
    }, function() {
        $("#feature-icon-" + type + "-rollover").css("z-index", "9");
        var rollover = $("#feature-icon-" + type + "-rollover");
        $(rollover).css("left", "-100em");
        $(rollover).css("top", "-100em");
    });
}

$(document).ready(function() {
    createRollover("warranty", 150);
    createRollover("preassembledpanels", 250);
    createRollover("factorypretreated", 160);
    createRollover("smartboard7", 260);
    createRollover("smartboard11", 260);
    createRollover("smartboard19", 250);
    createRollover("smartboard28", 250);
    createRollover("freedelivery", 140);
    createRollover("budget", 200);
    createRollover("deluxe", 200);
    createRollover("premium", 200);
    createRollover("ultra", 200);
});