//global variables
var courses;
var DIV_WIDTH = 300;
var DIV_NAME = "_cp_display";
//my functions and what-not

function setupDiv(){
  var dispDiv = document.getElementById(DIV_NAME);
  if(dispDiv){
    dispDiv.style.top = 0;
    dispDiv.style.left = 0;
    dispDiv.style.width = DIV_WIDTH;
    dispDiv.style.position= "absolute";
    dispDiv.style.borderStyle="ridge";
    dispDiv.style.borderWidth="thin";
    dispDiv.style.borderColor="#E0A51D";
    dispDiv.style.padding="10pt";
    dispDiv.style.backgroundColor="#E0A51D";
    //dispDiv.style.color="#013362";
    dispDiv.onclick = hideDescription;
  }
   
}

function getCourseById(cid){
  for(var i = 0; i < courses.length; i++){
    if(courses[i].getAttribute("id") == cid){
      return courses[i];
    }
  }
  return null;
}

function showDescription(inEvent, cid){
  var dispDiv = document.getElementById(DIV_NAME);
  if(dispDiv){
    var course = getCourseById(cid);
    dispDiv.innerHTML = getCourseWindowText(course);

     var x;
     var y;

    if(inEvent){
	//firefox responds
      y = inEvent.clientY + 15;
      x = inEvent.clientX + 15;
	//alert("1");
    }
    else if(event){
	//ie responds
      y = event.clientY + 15;
      x = event.clientX + 15;
	//alert("2");
    }
    else if(window.event){
	//ie responds
      y = window.event.clientY + 15;
      x = window.event.clientX + 15;
	//alert("3");
    }

    var width;
    var height; 
    if(window.innerWidth){
       width = window.innerWidth;
       height = window.innerHeight;
    }
    else if(document.body.clientWidth){
       width = document.body.clientWidth;
       hieght = document.body.clientHeight;
    }
    else if(document.documentElement.clientWidth){
       width = document.documentElement.clientWidth;
       height = document.documentElement.clientHeight;
    }

    var line = width - DIV_WIDTH - 50;
    
    //alert(line);
    line = (line > 0)?line:0;

    if(x > line){
      x = line;
    }
    if(y > height/2){
      y = height/2;
    }

    dispDiv.style.top = y;
    dispDiv.style.left = x;
    dispDiv.style.visibility = "visible";
    
  }
  else {
   //alert("Display not found");
  }
}

function hideDescription(){
  var dispDiv = document.getElementById(DIV_NAME);
  if(dispDiv){
    dispDiv.style.visibility = "hidden";
  }
}

function getElementContent(course, tag){
  var result = "";
  var element = course.getElementsByTagName(tag)[0];
  if(element.textContent){
     result = element.textContent;
  }
  else if(element.text){
     result = element.text;
  }
  //alert(result);
  return result;
}

function getCourseWindowText(course){
  var result = "";

  result += "<h3>" + getElementContent(course, "name") + "</h3><hr>";
  result += "<p>" + getElementContent(course, "description") + "</p><hr>";
  result += "<b>Prerequisites:</b> " + getElementContent(course, "prereq");
  result += '<p align="right"><small>Click to hide window</small></p>';

  return result;
}

function createArea(course){
  var map = document.getElementById("courseMap");

   //add an area to the map
  var area = document.createElement("area");
  var id = course.getAttribute("id");
  area.id = id;
  area.href="#" + id;
  area.shape = "rect";
  area.coords = getElementContent(course, "loc");
  area.alt = getElementContent(course, "name");
  //area.onmouseout = hideDescription;
  area.onclick = function(event) {showDescription(event, id); return false;};

  map.appendChild(area);
}

function fetchXMLData(){
  var url = "courseMap3.xml";
  var dataLoader = new net.ContentLoader(url, "GET", "", dataCallback);
  dataLoader.sendRequest();

}

function dataCallback(request){
  var response = request.responseXML;
  courses = response.getElementsByTagName('course');
  //alert(courses[0]);
  //parse each course and create an AREA in the image map for it
  for(var i = 0; i < courses.length; i++){
  //for(var i = 0; i < 2; i++){
    createArea(courses[i]);
  }
}

function loader(){
  setupDiv();
  fetchXMLData();
}

window.onload = loader;