var objGrids = new Object;
objGrids['grid_1'] = 385;
objGrids['grid_2'] = 385;
objGrids['grid_3'] = 226;
objGrids['grid_4'] = 451;
objGrids['grid_5'] = 451;

//pattern for lazy-load items is as follows:
//	left column: D, B, C, E, C
//	right column: D, C, A, C, E
// keep each grid's structure in an object or array for easy construction
//1) start with left column
//2) iterate through grid pattern for that column (keep track of position)
//3) fill in as many items as needed from the appropriate object with the appropriate item
//4) continue until all objects are accounted for (we may end up with empty blocks at the ends)
// note: since we will know which grd item child we are populating
//once all items are loaded (or at least in the process of loading), reset the initial width & scroller settings (perhaps disable the slider until all items are accounted for)

var arrLeftGridPattern = ["grid_d", "grid_b", "grid_c", "grid_e", "grid_c"];
var arrRightGridPattern = ["grid_d", "grid_c", "grid_a", "grid_c", "grid_e"];
var arrGrids = [arrLeftGridPattern, arrRightGridPattern];
var intWhichGridSide = 0; //used to alternate between left & right sides
var intLeftGridPatternPosition = 0; //used to track position of pattern
var intRightGridPatternPosition = 0; //used to track position of pattern
var intGridPatternPosition;
var intLeftGridImagePosition = 0;
var intRightGridImagePosition = 0;
var intLandscapeImagePosition = 0; //used to track position in objLandscapeItems
var intPortraitImagePosition = 0; //used to track position in objPortraitItems
var intLeftRightCounter = 0;
var objGridsXML;
var intGridLeftColumnWidth;
var intGridRightColumnWidth;
var intCurrentWindowWidth;

function updateDisplay() {
    if ($(window).width() < 1060) {
        $("div#scrollerHoverLeft").hide();
        $("div#scrollerHoverRight").hide();
    } else {
        $("div#scrollerHoverLeft").show();
        $("div#scrollerHoverRight").show();
    }
}

function getGridWidth(whichGrid) {
    if (whichGrid != undefined) {
        return parseInt($(objGridsXML).find("grid[id='" + whichGrid + "']").attr("width"));
    }
}

function setGridsObject(xml) {
    objGridsXML = $(xml);
    //lazy-load the remaining assets	
    $.ajax({
        type: "GET",
        url: "callbacks/getListXml.aspx",
        dataType: "xml",
        success: parseStoryXml
    });
}

function parseStoryXml(xml) {
    var intNumberOfStories = $(xml).find("stories").attr("c");
    var intNumberOfStoriesRemaining = intNumberOfStories;
        var mediaServer = $(xml).find("stories").attr("mH");
        var mediaUrl = $(xml).find("stories").attr("mU");
    var objLandscapeItems = $(xml).find("s[isL='1']");
    var objPortraitItems = $(xml).find("s[isL='0']");
    intGridPatternPosition = 0;
    while (intNumberOfStoriesRemaining > 0) {
        var thisGridId = arrGrids[intWhichGridSide][intGridPatternPosition];
        var strGridDivStructure = "";
        $(objGridsXML).find("grid[id='" + arrGrids[intWhichGridSide][intGridPatternPosition] + "']").find("image").each(function() {
            var strImageContainer = "";
            var strStoryInfoContainer = "";
            var strVideoImageIcon = "";
            var thisImageType = $(this).attr("type");
            var thisImageWidth = $(this).attr("width");
            var thisImageHeight = $(this).attr("height");
            var thisImageContainerClass = $(this).attr("name");
            var thisImageCategory = "";
            var thisStoryUrl = "";
            var thisStoryTitle = "";
            var boolHasVideo = false;
            if (thisImageType == "landscape") {
                if (intLandscapeImagePosition <= ($(objLandscapeItems).length - 1)) {
                    thisImageCategory = $(objLandscapeItems).eq(intLandscapeImagePosition).find("cN").text();
                    thisStoryUrl = $(objLandscapeItems).eq(intLandscapeImagePosition).find("sU").text();
                    thisStoryTitle = $(objLandscapeItems).eq(intLandscapeImagePosition).find("t").text();
                    boolHasVideo = parseInt($(objLandscapeItems).eq(intLandscapeImagePosition).attr("isV"));
                    //strImageContainer = "<img class=\"photo\" src=\"" + $(this).find("iU").text() + "&width=" + thisImageWidth + "&height=" + thisImageHeight + "\" />";
                    var imagestring = $(objLandscapeItems).eq(intLandscapeImagePosition).find("iU").text();
                    if (mediaServer.length > 0) {
                        imagestring = "http://" + mediaServer + stringReplace(mediaUrl, "{0}", imagestring);
                        imagestring = stringReplace(imagestring, "{1}", "238");
                        imagestring = stringReplace(imagestring, "{2}", "383");
                    }
                    strImageContainer = "<img class=\"photo\" src=\"" + imagestring + "\" />";
                    intNumberOfStoriesRemaining--;
                }
                intLandscapeImagePosition++;
            } else {
                if (intPortraitImagePosition <= ($(objPortraitItems).length - 1)) {
                    thisImageCategory = $(objPortraitItems).eq(intPortraitImagePosition).find("cN").text();
                    thisStoryUrl = $(objPortraitItems).eq(intPortraitImagePosition).find("sU").text();
                    thisStoryTitle = $(objPortraitItems).eq(intPortraitImagePosition).find("t").text();
                    boolHasVideo = parseInt($(objPortraitItems).eq(intPortraitImagePosition).attr("isV"));
                    //strImageContainer = "<img class=\"photo\" src=\"" + $(this).find("iU").text() + "&width=" + thisImageWidth + "&height=" + thisImageHeight + "\" />";
                    var imagestring = $(objPortraitItems).eq(intPortraitImagePosition).find("iU").text();
                    if (mediaServer.length > 0) {
                        imagestring = "http://" + mediaServer + stringReplace(mediaUrl, "{0}", imagestring);
                        imagestring = stringReplace(imagestring, "{1}", "358");
                        imagestring = stringReplace(imagestring, "{2}", "224");
                    }
                    strImageContainer = "<img class=\"photo\" src=\"" + imagestring + "\" />";
                    intNumberOfStoriesRemaining--;
                }
                intPortraitImagePosition++;
            }
            if (thisStoryTitle != "") {
                strStoryInfoContainer = "<div class=\"info\"><span>" + thisStoryTitle + "</span> <a href=\"" + thisStoryUrl + "?width=920&height=565&modal=true\" class=\"thickbox\">";
                if (boolHasVideo) {
                    strStoryInfoContainer = strStoryInfoContainer + "Watch</a></div>";
                } else {
                    strStoryInfoContainer = strStoryInfoContainer + "Read more</a></div>";
                }
                strImageContainer = strImageContainer + "<img class=\"hover\" src=\"images/hover_photo_land_large.png\" /><img class=\"darken\" src=\"images/darken_photo_land_large.png\" />";
                if (boolHasVideo) {
                    strImageContainer = strImageContainer + "<img class=\"video\" src=\"images/icon_video.png\" alt=\"This item has video content\" />";
                }
                strImageContainer = "<div class=\"photo\" rel=\"" + thisImageCategory + "\">" + strImageContainer + strStoryInfoContainer + "</div>";
            }
            strImageContainer = "<div class=\"" + thisImageContainerClass + "\">" + strImageContainer + "</div>";
            strGridDivStructure = strGridDivStructure + strImageContainer;
        });
        if (strGridDivStructure.indexOf('class="photo"') > 0) {
            strGridDivStructure = "<div class=\"" + thisGridId + "\">" + strGridDivStructure + "</div>";
        }
        if (intLeftRightCounter < 1) {
            intLeftRightCounter++;
        } else {
            intLeftRightCounter = 0; //resetting the left/right alternate so increment the intGridPatternPosition
            if (intGridPatternPosition < arrLeftGridPattern.length - 1) {
                intGridPatternPosition++;
            } else {
                intGridPatternPosition = 0;
            }
        }
        if (intWhichGridSide) {
            //right side, so switch to left
            $("div#scrollerGridRightColumn").append(strGridDivStructure);
            intWhichGridSide = 0;
        } else {
            //left side, so switch to right
            $("div#scrollerGridLeftColumn").append(strGridDivStructure);
            intWhichGridSide = 1;
        }
    }
    tb_init("a.thickbox");
    initializeScroller();

    $("div#scrollerFiltersContentWrapper ul li a").click(function() {
        if ($(this).hasClass("active")) {
            $("div#scrollerFiltersContentWrapper ul li a").removeClass("active");
            $("img.darken").fadeOut("slow");
            $("div#scrollerIndicators").empty();
        } else {
            $("div#scrollerFiltersContentWrapper ul li a").removeClass("active");
            $("img.darken").fadeIn("slow");
            $(this).addClass("active");
            $("div#scrollerIndicators").empty();
            var strActiveFilter = $(this).attr("rel");
            $("div.photo[rel*='" + strActiveFilter + "']").find("img.darken").fadeOut("slow");
            $("div.photo[rel*='" + strActiveFilter + "']").each(function() {
                var thisLeftColumnIndex = $("div#scrollerGridLeftColumn > div").index($(this).parent().parent("div"));
                var intLeftPos = 0;
                var intRightPos = 0;
                if (thisLeftColumnIndex >= 0) {
                    for (x = 0; x <= thisLeftColumnIndex; x++) {
                        if (x == thisLeftColumnIndex) {
                            thisWidth = (getGridWidth($("div#scrollerGridLeftColumn > div:eq(" + x + ")").attr("class")) / 2);
                        } else {
                            thisWidth = getGridWidth($("div#scrollerGridLeftColumn > div:eq(" + x + ")").attr("class"));
                        }
                        intLeftPos = intLeftPos + thisWidth;
                    }
                    var strMarker = "<img src=\"images/marker_" + strActiveFilter + ".png\" alt=\"\" style=\"left:" + (((intGridLeftColumnWidth - intLeftPos) / intGridLeftColumnWidth) * 470 + 10) + "px;\" />";
                    $("div#scrollerIndicators").append(strMarker);
                }
                var thisRightColumnIndex = $("div#scrollerGridRightColumn > div").index($(this).parent().parent("div"));
                if (thisRightColumnIndex >= 0) {
                    for (x = 0; x <= thisRightColumnIndex; x++) {
                        if (x == thisRightColumnIndex) {
                            thisWidth = (getGridWidth($("div#scrollerGridRightColumn > div:eq(" + x + ")").attr("class")) / 2);
                        } else {
                            thisWidth = getGridWidth($("div#scrollerGridRightColumn > div:eq(" + x + ")").attr("class"));
                        }
                        intRightPos = intRightPos + thisWidth;
                    }
                    var strMarker = "<img src=\"images/marker_" + strActiveFilter + ".png\" alt=\"\" style=\"right:" + (((intGridRightColumnWidth - intRightPos) / intGridRightColumnWidth) * 470 + 10) + "px;\" />";
                    $("div#scrollerIndicators").append(strMarker);
                }
            });
        }
    });
}

function initializeMapAnimation() {
	var flashvars = {};
	var params = {wmode: "opaque", quality: "high", menu: "false", bgcolor: "#3c75a6"};
	var attributes = {};

	swfobject.embedSWF("swf/map_bgcolour.swf", "mapContents", "960", "237", "9.0.0", "", flashvars, params, attributes);
	//$("#mapContentsMask").css({"display":"block", "top":"-237px"});
	setTimeout('$("#mapContentsMask").css({"display":"block", "top":"-237px"})', 2000);	
}
function autoScrollLeft() {
    if ($("#slider").slider("value") > -100) {
        if (!$("div#scrollerHoverLeft").hasClass("active")) {
            $("div#scrollerHoverLeft").addClass("active");
        }
        if ($("div#scrollerHoverLeft").hasClass("inactive")) {
            $("div#scrollerHoverLeft").removeClass("inactive");
        }
        if ($("div#scrollerHoverRight").hasClass("inactive")) {
            $("div#scrollerHoverRight").removeClass("inactive");
        }
        $("#slider").slider("value", $("#slider").slider("value") - 1);
    } else {
        $("div#scrollerHoverLeft").removeClass("active");
        $("div#scrollerHoverLeft").addClass("inactive");
    }
}
function autoScrollRight() {
    if ($("#slider").slider("value") < 100) {
        if (!$("div#scrollerHoverRight").hasClass("active")) {
            $("div#scrollerHoverRight").addClass("active");
        }
        if ($("div#scrollerHoverRight").hasClass("inactive")) {
            $("div#scrollerHoverRight").removeClass("inactive");
        }
        if ($("div#scrollerHoverLeft").hasClass("inactive")) {
            $("div#scrollerHoverLeft").removeClass("inactive");
        }
        $("#slider").slider("value", $("#slider").slider("value") + 1);
    } else {
        $("div#scrollerHoverRight").removeClass("active");
        $("div#scrollerHoverRight").addClass("inactive");
    }
}
var objAutoAnimate;
function autoAnimateRight() {
    if ($("#slider").slider("value") < 6) {
        $("#slider").slider("value", $("#slider").slider("value") + 0.2);
    } else {
        clearInterval(objAutoAnimate);
		initializeMapAnimation();
    }
}

function initializeScroller() {
    $("div#scrollerGridLeftColumn").css("width", ($("div#scrollerGridLeftColumn div.grid_a").length * 385) + ($("div#scrollerGridLeftColumn div.grid_b").length * 385) + ($("div#scrollerGridLeftColumn div.grid_c").length * 226) + ($("div#scrollerGridLeftColumn div.grid_d").length * 288) + ($("div#scrollerGridLeftColumn div.grid_e").length * 193) + "px");
    $("div#scrollerGridRightColumn").css("width", ($("div#scrollerGridRightColumn div.grid_a").length * 385) + ($("div#scrollerGridRightColumn div.grid_b").length * 385) + ($("div#scrollerGridRightColumn div.grid_c").length * 226) + ($("div#scrollerGridRightColumn div.grid_d").length * 288) + ($("div#scrollerGridRightColumn div.grid_e").length * 193) + "px");

    intGridLeftColumnWidth = ($("div#scrollerGridLeftColumn div.grid_a").length * 385) + ($("div#scrollerGridLeftColumn div.grid_b").length * 385) + ($("div#scrollerGridLeftColumn div.grid_c").length * 226) + ($("div#scrollerGridLeftColumn div.grid_d").length * 288) + ($("div#scrollerGridLeftColumn div.grid_e").length * 193);
    intGridRightColumnWidth = ($("div#scrollerGridRightColumn div.grid_a").length * 385) + ($("div#scrollerGridRightColumn div.grid_b").length * 385) + ($("div#scrollerGridRightColumn div.grid_c").length * 226) + ($("div#scrollerGridRightColumn div.grid_d").length * 288) + ($("div#scrollerGridRightColumn div.grid_e").length * 193);
    //scroller position is relative
    intCurrentWindowWidth = $(window).width();
    //include offset to account for odd distribution between sides
    if (intGridLeftColumnWidth >= intGridRightColumnWidth) {
        var intStartPoint = (intGridLeftColumnWidth - intGridRightColumnWidth) / 2;
    } else {
        var intStartPoint = -(intGridRightColumnWidth - intGridLeftColumnWidth) / 2;
    }
    $("#scrollerMainContainerWrapper").css("left", intStartPoint + "px");

    $('#slider').slider({
        min: -100,
        max: 100,
        value: 0,
        animate: true,
        slide: function(event, ui) {
			if (ui.value >= 0){
				$("#scrollerMainContainerWrapper").css("left", (-1 * ui.value) * ((intGridLeftColumnWidth - (intCurrentWindowWidth/2))/100) - 20 + (intStartPoint * 2) + "px");
			} else {
				$("#scrollerMainContainerWrapper").css("left", (-1 * ui.value) * ((intGridRightColumnWidth - (intCurrentWindowWidth/2))/100) + 20 + (intStartPoint * 2) + "px");
			}
		},
		change: function(event, ui){
			if (ui.value >= 0){
				$("#scrollerMainContainerWrapper").css("left", (-1 * ui.value) * ((intGridLeftColumnWidth - (intCurrentWindowWidth/2))/100) - 20 + (intStartPoint * 2) + "px");
			} else {
				$("#scrollerMainContainerWrapper").css("left", (-1 * ui.value) * ((intGridRightColumnWidth - (intCurrentWindowWidth/2))/100) + 20 + (intStartPoint * 2) + "px");
			}
        }
    });

    objAutoAnimate = setInterval("autoAnimateRight()", 10);

    $("div.photo").click(function() {
        $(this).find("div.info a").triggerHandler("click");
        return false;
    });

    var objHoverIntervalLeft;
    var objHoverIntervalRight;

    $("div#scrollerHoverLeft a").hover(
		function() {
		    objHoverIntervalLeft = setInterval("autoScrollLeft()", 3);
		},
		function() {
		    clearInterval(objHoverIntervalLeft);
		}
	);
    $("div#scrollerHoverRight a").hover(
		function() {
		    objHoverIntervalRight = setInterval("autoScrollRight()", 3);
		},
		function() {
		    clearInterval(objHoverIntervalRight);
		}
	);

    if (typeof permaMode != 'undefined') permaMode();
}

function getQueryParam(param) {
    qstring = window.location.search.substring(1);
    gy = qstring.split("&");
    for (i=0;i<gy.length;i++) {
        ft = gy[i].split("=");
        if (ft[0].toLowerCase() == param) {
            return ft[1];
        }
    }
    return "";
}

function stringReplace(source, target, replacement) {
    var tokens = new Array();
    tokens = source.split(target);
    var output = tokens.join(replacement);
    return output;
}

$(document).ready(function() {
    //check the follwing: 1)browser version; 2)screen resolution; 3)browser resolution
    //perhaps for valid browsers, just try to maximize the browser window if possible
    /*var boolIsValidBrowser = false;
    if ($.browser.msie && (screen.availWidth >= 960 && screen.availHeight >= 700)) {
    //IE
    if (parseFloat($.browser.version) >= 7) {
    boolIsValidBrowser = true;
    }
    } else if ($.browser.safari && (screen.availWidth >= 960 && screen.availHeight >= 700)) {
    //Safari & Chrome (both Webkit)
    if (parseInt($.browser.version) > 526) {
    boolIsValidBrowser = true;
    }
    } else if ($.browser.mozilla && (screen.availWidth >= 960 && screen.availHeight >= 700)) {
    //Firefox
    if (parseFloat($.browser.version) >= 1.9) {
    boolIsValidBrowser = true;
    }
    }*/

    //if (boolIsValidBrowser){
    //maximize the browser window size
    //top.window.moveTo(screen.width - screen.availWidth, 0);

	if (swfobject.hasFlashPlayerVersion("9.0.0")) {
		//Flash is installed, so hide the default map img element
	} else {
		$("#mapContents img").css("display","inline");
	}
    var pageMode = getQueryParam("cmspagemode");

    if (pageMode.length == 0) {
        if (document.all) {
            //top.window.resizeTo(1024, screen.availHeight);
        } else if (document.layers || document.getElementById) {
            if (top.window.outerHeight < screen.availHeight || top.window.outerWidth < screen.availWidth) {
                //top.window.outerHeight = top.screen.availHeight;
                //top.window.outerWidth = 1024;
            }
        }
    }

	
    $("a#siteTitle").click(function() {
        //remove all filters
        $("div#scrollerFiltersContentWrapper ul li a").removeClass("active");
        $("img.darken").fadeOut("slow");
        $("div#scrollerIndicators").empty();
    });

    $(window).resize(function() {
        intCurrentWindowWidth = $(window).width();
        updateDisplay();
    });
    updateDisplay();

    //get the grids structure
    $.ajax({
        type: "GET",
        url: "xml/grids.xml",
        dataType: "xml",
        success: setGridsObject
    });
    /*} else {
    //redirect the user
    document.location.href = "http://www.hellobc.com";
    }*/

});