// Restore the india image
var host = window.location.hostname;
host = host.replace(/^www\./i,'');
var imgroot = "http://"+host+"/webdemos/indiaimagemap/img/dashboard/";
var indiaimg = imgroot+"india.gif";
var spacerimg = imgroot+"spacer.gif";
var fadein = 600;
var statebackgroundopacity = 100;
var statebackgroundcolor = "#FFFFFF";
var currenthighlightedstate = "";

function imageclick(state) {
  // Show the enlarged state image
  // Flow diagram:
  // 1. We have a table with id="india" and backgroundImage = "india.gif"
  // 2. Inside table we have an image with id="mouseoverlayer" and backgroundImage = "spacer.gif" (display:block)
  // 3. Inside table we have an image with id="mouseclicklayer" and backgroundImage = "spacer.gif" (display:none)
  // 4. As user clicks one of the state, do the following:
  //    a) Set backgroundImage = "spacer.gif" for id="india"
  //    b) Set display:none for id="mouseoverlayer"
  //    c) Set display:block for id="mouseclicklayer" and backgroundImage = "state.gif"
  //    d) Set a mouseout handler on id="mouseclicklayer" block
  //    e) On mouseout from id="mouseclicklayer", set display:none for id="mouseclicklayer"
  //    f) Set display:block for id="mouseoverlayer"
  //    g) Set backgroundImage = "india.gif" for id="india"
  
  var image = new Image();                  // Start loading the state image first up, as it will take some time
  image.src = imgroot+"onmouseclick/"+state+".gif";
  
  document.getElementById("india").style.background = statebackgroundcolor+" url("+spacerimg+") no-repeat scroll 0 0";
  document.getElementById("india").style.opacity = statebackgroundopacity/100;
  document.getElementById("india").style.filter = "alpha(opacity="+statebackgroundopacity+")";
  
  document.getElementById("mouseoverlayer").style.display = "none";
  
  document.mouseclicklayer.src = image.src;
  document.getElementById("mouseclicklayer").style.display = "block";
  opacity("mouseclicklayer",0,100,fadein);
  return false;
}
function imageout() {
  opacity("mouseoverlayer",100,0,0);
  document.getElementById("tooltip").style.display = "none";
  return false;
}
function showindia() {
  document.getElementById("mouseclicklayer").style.display = "none";
  document.mouseclicklayer.src = spacerimg; // Important to set it as blank before setting display:block, 
                                            // else it will show previous clicked state image until the new state 
                                            // image is fully loaded, not a good user experience
  document.getElementById("mouseclicklayer").style.opacity = 0;                  // Set opacity=0 to avoid the flickring effect
  document.getElementById("mouseclicklayer").style.KhtmlOpacity = 0;
  document.getElementById("mouseclicklayer").style.filter = "alpha(opacity=0)";
  document.getElementById("mouseclicklayer").style.MozOpacity = 0;
  
  document.getElementById("mouseoverlayer").style.display = "block";
  document.getElementById("india").style.background = "transparent url("+indiaimg+") no-repeat scroll 0 0";
  document.getElementById("india").style.opacity = 1.0;
  document.getElementById("india").style.filter = "alpha(opacity=100)";
  return false;
}
function tooltip(state,e,type) {
  if(state != currenthighlightedstate) {
    currenthighlightedstate = state;
    // Show the mouseover images
    var image = new Image();
    image.src = imgroot+"onmouseover/"+state+".gif";
    document.mouseoverlayer.src = image.src;
    opacity("mouseoverlayer",0,100,100);
  }
  
  if(e.pageX) {
    pos_x = e.pageX-document.getElementById("container").offsetLeft+50;
    pos_y = e.pageY-document.getElementById("container").offsetTop-30;
  }
  else if(e.x) {
    pos_x = e.x+50;
    pos_y = e.y-30;
  }
  document.getElementById("tooltip").style.top = pos_y+"px";
  document.getElementById("tooltip").style.left = pos_x+"px";
  document.getElementById("state-title").innerHTML = state.toUpperCase();
  document.getElementById("state-message-title").innerHTML = state;
  document.getElementById("tooltip").style.display = "block";
  return false;
}
function opacity(id, opacStart, opacEnd, millisec) {
  var speed = Math.round(millisec / 100);
  var timer = 0;
  if(opacStart > opacEnd) {
    for(i = opacStart; i >= opacEnd; i--) {
      setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
      timer++;
    }
  } 
  else if(opacStart < opacEnd) {
    for(i = opacStart; i <= opacEnd; i++) {
      setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
      timer++;
    }
  }
}
function changeOpac(opacity, id) {
  var object = document.getElementById(id).style;
  object.opacity = (opacity / 100);
  object.MozOpacity = (opacity / 100);
  object.KhtmlOpacity = (opacity / 100);
  object.filter = "alpha(opacity=" + opacity + ")";
}