//$.include("js/splendid-lib/Dictionary.js");
//$.include("js/splendid-lib/StringBuilderEx.js");
//$.include("js/splendid-lib/splendid-utils.js");
//$.include("js/search-filters.js");

var containerID = ".prodPU";
var searchPopupTimer = null;
var hoverTime = 400; // The time to hover over an image without showing the popup
var fadeTime = 350; // The time to fade the popup in and out.
var chosenProdId = null;

$(document).ready(function() {

	$("#imgView").click(function() {
		imgView_onClick();
		return false;
	});


    // wire up the rollover event for each image
    $("ul.results img").hover(
        function() {
			chosenProdId = this.id;
            searchPopupTimer = setTimeout(updatePopup, hoverTime);
        },
        function() {
            clearTimeout(searchPopupTimer);
            searchPopupTimer = null;
			chosenProdId = null;
            $("#prodOne").fadeOut(fadeTime);
			$("#popSetImg").attr("src", '/spacer.gif');
        }
    );

});

function updatePopup() {
    clearTimeout(searchPopupTimer);
    searchPopupTimer = null;

    if ($(".viewBehind").length > 0) {
    	$("#popSetImg").attr("src", $("#"+chosenProdId+"SetF").val());
	} else {
    	$("#popSetImg").attr("src", $("#"+chosenProdId+"SetB").val());
	}
    $("#popSetImg").attr("alt", $("#"+chosenProdId+"Name").val());
	$("#popSetName").html($("#"+chosenProdId+"Name").val());
	$("#popSetPrice").html("<strong>"+$("#"+chosenProdId+"Price").val()+"</strong>");

	if ($("#"+chosenProdId+"Color").val() == "") {
        $("#colours").hide();
	} else {
		$("#popSetColor").html("<strong>Colours:</strong> " + $("#"+chosenProdId+"Color").val());
        $("#colours").show();
	}

	if ($("#"+chosenProdId+"Options").val() == "") {
        $("#options").hide();
	} else {
		$("#popSetOptions").html("<strong>Options:</strong> " + $("#"+chosenProdId+"Options").val());
        $("#options").show();
	}

	positionPopup2();
	$("#prodOne").fadeIn(fadeTime);
}

function positionPopup2() {
    // Actually set the position of the popup

    $("#prodOne").css({
        left: 0,
        top:0,
		zIndex: 560
    });

	var searchWrapOffset = $("#searchWrap").offset();
    var productOffset = $("#"+chosenProdId+"Prod").offset(); // offset of the hovered product
    var resultsOffset = $("#prodResults").offset(); // offset of the conatining <ul>

    // to get top/left of hovered product
    var left = productOffset.left - resultsOffset.left;
    var top = productOffset.top;
    // also wanna move it up and across a bit too, so the image behind is viewable too...
    // If in first 2 cols, then show to right, else show to left
    if ($("#"+chosenProdId+"Prod").hasClass("left")) {
        left = left - $("#prodOne").width();
    } else {
        left = left + ($("#"+chosenProdId+"Prod").width() + 17); // Is roughly the width of the drop shadow
    }
	top = top - ($("#prodOne").height() / 2);
	top = top - ($("#"+chosenProdId+"Prod").height() / 2);
	top = top - 20;

	if ($.browser.msie) {
    	if (isSetAsIE6) {
        	top = top - 160;
		}
	}
    // If off the top of the page, then bring it back into the viewable area.
    if ((top + searchWrapOffset.top) < getTopOffset()) {
        top = (getTopOffset() - searchWrapOffset.top) + 8; // 8 is some magin number that makes it look ok.
    }

    // If off the bottom of the page, then bring it back into the viewable area
    if (($("#prodOne").height() + top + searchWrapOffset.top) > ($(window).height() + getTopOffset())) {
        top = ((($(window).height() + getTopOffset()) - $("#prodOne").height()) - searchWrapOffset.top) - 20; // Another magic number to make it look ok
    }

    // Actually set the position of the popup
    $("#prodOne").css({
        left: left,
        top: top,
		zIndex: 560
    });
}

function showSearchLoading() {
    $("#prodResults").hide();
    $("#prodResults").children().remove();
    $("#loading").show();
}

function removeSearchLoading() {
    $("#loading").hide();
    $("#prodResults").show();
}

function swapImages(dir) {
    var imgNodes = $(".results li img");
    var count = 0;

    $.each(imgNodes, function() {
        switch (dir) {
            case "behind":
                $(this).attr("src", $("#bImg"+this.id).val());
                break;
            case "front":
                $(this).attr("src", $("#fImg"+this.id).val());
                break;
        }
        count++;
    });
}

function imgView_onClick() {
    if ($(".viewBehind").length > 0) {
        $(".viewBehind").removeClass("viewBehind").addClass("viewFront");
        $(".viewFront a").html("View all images from front");
        swapImages("behind");
    } else {
        $(".viewFront").removeClass("viewFront").addClass("viewBehind");
        $(".viewBehind a").html("View all images from behind");
        swapImages("front");
    }
}