// JavaScript file
var mainItemImg = new Image();
var coverOverlayImgs = new Array ();
var coverOverlayImgEls = new Array();
var areaSelected = -1;
var mainItemImgEl = undefined;
var tooltipDiv = undefined;

function MDonmouseover (e) {
	if (!e) var e = window.event;
	
	var canvasX = findElPosX(mainItemImgEl);
	var canvasY = findElPosY(mainItemImgEl);
	var mouseX = findMouseX(e);
	var mouseY = findMouseY(e);
	
	tooltipDiv.style.left = (mouseX+15) + 'px';
	tooltipDiv.style.top = (mouseY+15) + 'px';
	
	var x = mouseX - canvasX;
	if (x > (mainItemImgEl.width)) {
	    // return as we aren't really in the canvas
	    areaSelected = -1;
	    highlightArea();
	    return;
	}
	var y = mouseY - canvasY;
	if (y > (mainItemImgEl.height)) {
	    // return as we aren't really in the canvas
	    areaSelected = -1;
	    highlightArea();
	    return;
	}
	
	// scale these values for the fact that our areaMap is always based on 200x150
	   var scalex = 200;
       var scaley = 150;
       var ua = navigator.userAgent;
       var MSIEOffset = ua.indexOf("MSIE ");    
       var IEversion = 0;
       if (MSIEOffset != -1)        
       {
            IEversion = parseFloat(ua.substring(MSIEOffset + 5, ua.indexOf(";", MSIEOffset)));
       }            
       if(IEversion == 8)
       {
           scalex = 200;
           scaley = 148;            
       }
       x = x*(scalex/mainItemImg.width);
       y = y*(scaley/mainItemImg.height);
       
       x = Math.floor(x);
       y = Math.floor(y);
       
       var imgWidth = Math.floor(mainItemImg.width);
       var idx = (y*scalex)+x;
       
	
	//var outputEl = document.getElementById('debugInfo');
	//if (outputEl) {
	    //outputEl.innerHTML = "imgWidth="+imgWidth + ", ";
	    //outputEl.innerHTML += "X = " + x + ", Y = " + y + ", areaMaps = " + areaMap.length + ", Idx = " + idx + ", val = " + areaMap[idx];
	//}
	
	var found = 0;
	
	var areaHoveredOverIdx;
	if (idx < areaMap.length) {
	    areaHoveredOverIdx = areaMap[idx];
	} else {
	    areaHoveredOverIdx = 0;
	}
	if (areaHoveredOverIdx == 0) {
	    found = 0;
		if (areaSelected != -1) {
			//outputEl.innerHTML += ", found?:false";
			areaSelected = -1;
			highlightArea();
		}
	} else {
	    found = 1;
	    // remove the +1 that is placed by the server code
	    areaHoveredOverIdx = areaHoveredOverIdx - 1;
		if (areaHoveredOverIdx != areaSelected) {
			areaSelected = areaHoveredOverIdx;
			highlightArea();
		}
	}
}

var newImgEl;

//var highlightTimerID;
//var highlightedLastTime = 0;
function highlightArea() {
    var highlightedOne = false;
    for (var i = 0; i < coverOverlayImgEls.length; i++) {
        newImg = coverOverlayImgEls[i];
        if (areaIndexes[i] == areaSelected) {
		//if (highlightedLastTime) {
			//newImg.style.visibility = 'hidden';
		//} else {
			newImg.style.visibility = 'visible';
		//}
		//highlightedLastTime = !highlightedLastTime;
	        highlightedOne = true;
	    } else {
	        newImg.style.visibility = 'hidden';
	    }
    }
	
    if (!highlightedOne) {
	tooltipDiv.style.visibility="hidden";
    } else {
	var outputEl = document.getElementById('debugInfo');
    	if (outputEl) {
		outputEl.innerHTML = "mousein";
	}
	tooltipDiv.style.visibility="visible";
    }
    
    //if (highlightTimerID) {
	    //clearTimeout(highlightTimerID);
    //}
    //highlightTimerID = setTimeout("highlightArea()", 80);
}

function MDonmouseout () {
    areaSelected = -1;
    //var outputEl = document.getElementById('debugInfo');
	//if (outputEl) {
	    //outputEl.innerHTML = "onmouseout";
	//}
    highlightArea();
}

function draw(){
	if (mainItemImgEl) {
		mainItemImgEl.onmousemove = MDonmouseover;
		mainItemImgEl.onclick = function () {
		            var isNewUIUser = document.getElementById('isNewUIUser');                                      
                if(isNewUIUser!=null && isNewUIUser.value.toLowerCase()=='true')
                {
		         __doPostBack("AreaSelected", areaSelected);
		        }
		        else
		        {
		            location.href = 'ItemBrowser.aspx?area=' + areaSelected + '&event=area&browser=it_cover';
		        }
		        
		    return false;
		}
		mainItemImgEl.onmouseout = MDonmouseover;
	}
}

function onimgload () {


	draw();
	
	var mainImgX = findElPosX(mainItemImgEl);
	var mainImgY = findElPosY(mainItemImgEl);	
	//var outputEl = document.getElementById('debugInfo');
//	if (outputEl) {
	    //outputEl.innerHTML = "imgWidth="+mainItemImgEl.width + ", imgHeight="+mainItemImgEl.height + ", ";
	    //outputEl.innerHTML += "X = " + mainImgX + ", Y = " + mainImgY;
	//}
	
	for (var i = 0; i < areaIndexes.length; i++) {
   	    var img = coverOverlayImgs[areaIndexes[i]];
   	    var divEl = document.createElement("div");
   	    var imgEl = document.createElement("img");   	    
   	    imgEl.setAttribute("src", img.src);   	    
   	    imgEl.setAttribute("width", mainItemImgEl.width);
   	    imgEl.setAttribute("height", mainItemImgEl.height);
   	    
   	    imgEl.setAttribute("id", "ovlImgId"+i);
   	    
   	    divEl.style.position = 'absolute';
   	    divEl.style.top = mainImgY + "px";
   	    divEl.style.left = mainImgX + "px";
   	    divEl.style.visibility = 'hidden';
   	    divEl.style.width = mainItemImgEl.width;
   	    divEl.style.height = mainItemImgEl.height;
   	    divEl.style.zIndex = 5000;
   	    divEl.appendChild(imgEl);
   	    fixPNG(divEl, img.src);
   	    document.body.appendChild(divEl);
   	    coverOverlayImgEls[i] = divEl;
   	    
   	    divEl.onmousemove = MDonmouseover;
		divEl.onclick = function () {
		
		        var isNewUIUser = document.getElementById('isNewUIUser');                    		            
                if(isNewUIUser!=null && isNewUIUser.value.toLowerCase()=='true')
                {
		         __doPostBack("AreaSelected", areaSelected);
		        }
		        else
		        {
		            location.href = 'ItemBrowser.aspx?area=' + areaSelected + '&event=area&browser=it_cover';
		        }
		    return false;   
		}
		divEl.onmouseout = MDonmouseover;
   	}
}

function isCoverSelectionEnabled () {
    return eval('(typeof(areaCount) != "undefined");')
}

function setupCoverSelector() {
    if (mainItemImgEl) {
        var imgUrl = mainItemImgEl.getAttribute('src');
    
   	    // now load the overlay images
   	    if (/MSIE/.test(navigator.userAgent) && !window.opera) {
   	        for (var i = 0; i < areaIndexes.length; i++) {
   	            var areaId = areaIndexes[i];
   	            var ovlImg = new Image();
   	            coverOverlayImgs[areaIndexes[i]] = ovlImg;
   	            ovlImg.src = overlayImgUrl + '&AreaOverlayIdx=' + areaId;
   	        }
   	        mainItemImg.onload = onimgload;
   	        mainItemImg.src = imgUrl;
   	    } else {
   	        var ovlImg = new Image();
   	        var curImg = 0;
   	        var onloadFunc = function () {
       	        if (curImg < (areaCount-1)) {
	                curImg++;
   	                var newImg = new Image();
   	                newImg.onload = onloadFunc;
   	                newImg.onerror = function (e) {
   	                    alert("error with: " + this.src);
   	                    // retry up to twice on errors
   	                    if (!this.retryCount) {
   	                        this.retryCount = 0;
   	                    }
   	                    if (this.retryCount < 2) {
   	                        curImg--;
   	                    }
   	                    eval("onloadFunc();");
   	                };
   	                newImg.src = overlayImgUrl + '&AreaOverlayIdx=' + areaIndexes[curImg];
   	                coverOverlayImgs[areaIndexes[curImg]] = newImg;
   	            } else if (curImg == (areaCount-1)) {
           	        curImg++;
   	                mainItemImg.onload = onimgload;
   	                mainItemImg.src = imgUrl;
   	            }
   	        };
   	        ovlImg.onload = onloadFunc;
   	        coverOverlayImgs[areaIndexes[curImg]] = ovlImg;
   	        ovlImg.src = overlayImgUrl + '&AreaOverlayIdx=' + areaIndexes[curImg];
   	    }
   	    
   	    tooltipDiv = document.createElement("div");
   	    var clientid = document.getElementById('hdnClientID');    
        if(clientid!=null && clientid.value==486)
   	        tooltipDiv.innerHTML = "<div>Click to change tile</div>";
   	    else
   	        tooltipDiv.innerHTML = "<div>Click to change cover</div>";    
   	    tooltipDiv.style.visibility = "hidden";
   	    tooltipDiv.style.position = "absolute";
   	    tooltipDiv.style.top = '150px';
   	    tooltipDiv.style.left = '150px';
   	    tooltipDiv.style.backgroundColor = '#e6ecff';
   	    tooltipDiv.style.borderColor = '#003399';
   	    tooltipDiv.style.borderStyle = 'solid';
   	    tooltipDiv.style.borderWidth = '1px';
   	    tooltipDiv.style.zIndex=10000;
   	    tooltipDiv.style.paddingTop='2px';
   	    tooltipDiv.style.paddingBottom='2px';
   	    tooltipDiv.style.paddingLeft='5px';
   	    tooltipDiv.style.paddingRight='5px';
   	    tooltipDiv.style.fontSize='x-small';
   	    document.body.appendChild(tooltipDiv);
    }
}

function initCoverSelector (oldImgEl) {
    mainItemImgEl = oldImgEl;
    if (window.addEventListener) window.addEventListener("load",setupCoverSelector,false);
    else if (window.attachEvent) window.attachEvent("onload",setupCoverSelector);
}