var htmlString = "<table border='0' cellpadding='0' cellspacing='0' id='menuItems'><tr>";
var jsonData;
var curField = 2;
var curSection = 10;
//---------
var clicker = document.createElement("div");
var sectionsLength = 0;
var currentAnimSection = 0;
var intervalID;
var timeoutID;

$j.ajax({
    type: "GET",
    url: "/resources/js/showcaseEuropeEN.js",
    dataType: "json",
    async: false,
    success: function(json) {
        jsonData = json;
        for (var i = 0; i < json.section.length; i++) {
            preloadImage(json.section[i].imageurl);

            if (i > 2) {
                htmlString += "<td class='topMenuItem topMenuItemHover' style='display: none;'";
            }
            else {
                htmlString += "<td class='topMenuItem'";
            }
            htmlString += " onmouseover='changeImageText(";
            htmlString += i;
            htmlString += ")'";
            htmlString += " onclick='window.location=\"";
            htmlString += json.section[i].url;
            htmlString += "\";'>";
            htmlString += json.section[i].name + "</td>";
       
        }
        htmlString += "</tr></table>";
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert("Unable to load JSON object, please refresh.");
    }
});

function preloadImage(url) {
	var imageObj = new Image();
	imageObj.src = url;
}

function changeImageText(jsonNum) {
	if (curSection != jsonNum) {
		var imageStr = "<img src='" + jsonData.section[jsonNum].imageurl + "' />";
		var textStr = "<span class='bigtext'>" + jsonData.section[jsonNum].bigtext + "</span><br /><span class='smalltext'>" + jsonData.section[jsonNum].smalltext + "</span> <a href='" + jsonData.section[jsonNum].url + "'>" + jsonData.section[jsonNum].calltoaction + "</a>";
		
		if (curField == 1) {
			$j("#image2").html(imageStr);
			$j("#text2").html(textStr);
			
			$j("#image2").css("zIndex","8");
			$j("#image1").css("zIndex","5");
			$j("#text2").css("zIndex","9");
			$j("#text1").css("zIndex","6");
			
			$j("#image2").animate({
					opacity: 1
				}, 500);
			$j("#image1").animate({
					opacity: 0
				}, 500);
			$j("#text2").animate({
					top: 30,
					opacity: 1
				}, 500, function() {
					$j("#text2").css("filter", "none");
					$j("#text2").css("filter", "inherit");
				});
			$j("#text1").animate({
					top: 10,
					opacity: 0
				}, 500, function() {
					$j("#text1").css("top", "50px");
					$j("#text1").css("filter", "inherit");
				}
			);
			
			
			$j("#text2,#image2").click(function() {
				window.location = jsonData.section[jsonNum].url;
			});
			curField = 2;
		}
		else {
			$j("#image1").html(imageStr);
			$j("#text1").html(textStr);
			
			$j("#image2").css("zIndex","5");
			$j("#image1").css("zIndex","8");
			$j("#text2").css("zIndex","6");
			$j("#text1").css("zIndex","9");
			
			$j("#image1").animate({
					opacity: 1
				}, 500);
			$j("#image2").animate({
					opacity: 0
				}, 500);
			if (curSection != 10) {
				$j("#text1").animate({
						top: 30,
						opacity: 1
					}, 500, function() {
						$j("#text1").css("filter", "none");
						$j("#text1").css("filter", "inherit");
					});
			}
			else {
				$j("#text1").animate({
						top: 30
					}, 500, function() {
						$j("#text1").css("filter", "none");
						$j("#text1").css("filter", "inherit");
					});
			}
			$j("#text2").animate({
					top: 10,
					opacity: 0
				}, 500, function() {
					$j("#text2").css("top", "50px");
					$j("#text2").css("filter", "inherit");
				}
			);
			
			$j("#text1,#image1,").click(function() {
				window.location = jsonData.section[jsonNum].url;
			});
			
			curField = 1;
		}
		curSection = jsonNum;
	}
}

function getNextSection() {
	if (currentAnimSection < sectionsLength - 1) {
		changeImageText(currentAnimSection + 1);
		$j(".topMenuItem").removeClass("topMenuItemHover");
		$j($j(".topMenuItem")[currentAnimSection + 1]).addClass("topMenuItemHover");
		currentAnimSection++;
	}
	else {
		changeImageText(0);
		$j(".topMenuItem").removeClass("topMenuItemHover");
		$j($j(".topMenuItem")[0]).addClass("topMenuItemHover");
		currentAnimSection = 0;
	}
}

function trigger() {
	$j(clicker).click();
}

function restoreInterval() {
	intervalID = setInterval(trigger, 7000);
}

$j(document).ready(function() {
	$j("#topMenu").html(htmlString);
	$j("#image1").css("opacity", 0);
	changeImageText(3);
	currentAnimSection = 3;
	var activeURL;

	$j(".topMenuItem").hover(
		function() {
			$j(".topMenuItem").removeClass("topMenuItemHover");
			$j(this).addClass("topMenuItemHover");
			activeURL = "";
			clearInterval(intervalID);
			if (timeoutID != null) {
				clearTimeout(timeoutID);
			}
		},
		function() {
			timeoutID = setTimeout(restoreInterval, 3000);
		}
	);
	
	sectionsLength = $j(".topMenuItem").length;
	
	$j(clicker).click(function(){
		getNextSection();
	});
	intervalID = setInterval(trigger, 7000);
	
	
	$j("#regionModal").dialog({autoOpen: false, modal: true, width: 997, height: 160, resizable: false, position: ['center','top']});
	
	$j(".changeRegion").click(function() {
		$j("#regionModal").dialog("open");
		return false;
	});
});