// SkewsMeMapper
//
// Interactive mapping program given an image to map and comments relevant to regions on that map.
//
// Copyright Skews Me (2009)
//
// Exports: global variable gSkewsMeMapper
//          var page = gSkewsMeMapper.CreatePage();
//          var state = page.AddState(name,description);
//          var city = state.AddCity(name,description, image,width,height, xCapitolOriginal,yCapitolOriginal, xCapitolNewPic,yCapitolNewPic, elementIDcomment);
//          city.AddArea(unique name for image map location, left,top,right,bottom, elementIDcomment);
//          city.AddDot(unique name for image map location, left,top, elementIDcomment); // dot is 15x15
//          city.Commit(); // Creates an image map of areas/dots on the image supplied to city created by state.AddCity(...)
//          city.Set(); // Display the city
// Supply HTML elements: page.imageDirectory, page.elementIDmap, page.elementIDcityList, page.classCityList
//
// UNDONE: multiple Page and State support

function Location(name,left,top,right,bottom,areaCommentID)
{
  this.name=name;
  this.left=left;
  this.top=top;
  this.right=right;
  this.bottom=bottom;
  this.areaCommentID=areaCommentID;
}

function City(name,image,width,height,xCapitolOriginalMap,yCapitolOriginalMap,xCapitolNewMap,yCapitolNewMap,cityCommentID,parentPage)
{
  this.name=name;
  this.image=image;
  this.width=width;
  this.height=height;
  this.locations=new Array();

  // for use by document.getElementById()
  this.parentPage=parentPage; // global IDs for page
  this.cityCommentID=cityCommentID;
  
  this.xOffset=xCapitolNewMap-xCapitolOriginalMap;
  this.yOffset=yCapitolNewMap-yCapitolOriginalMap;

  this.AddArea=CityAddArea;
  this.AddDot=CityAddDot;
  this.Commit=CityCommit;
  this.Set=CitySet;
}

function CityAddArea(name,left,top,right,bottom,areaCommentID)
{
  this.locations.push(new Location(name,left+this.xOffset,top+this.yOffset,right+this.xOffset,bottom+this.yOffset,areaCommentID));
}

function CityAddDot(name,x,y,areaCommentID)
{
  this.AddArea(name,x,y,x+15,y+15,areaCommentID);
}

function CitySet()
{
  var e=document.getElementById(this.parentPage.elementIDmap);
  if (e)
  {
    e.innerHTML = '<img src="' + this.parentPage.imageDirectory + this.image + '" usemap="#' + this.name + 'map" width="' + this.width + '" height="' + this.height + '" border="0" />';
    e.scrollLeft = e.scrollTop = 0;
  }
  gSkewsMeMapper.ShowComment(this.cityCommentID);
}

function CityCommit()
{
  document.write('<map name="' + this.name + 'map">');
  for (var i=0,location,coords; i<this.locations.length; i++)
  {
    location = this.locations[i];
    coords = location.left + ',' + location.top + ',' + location.right + ',' + location.bottom;
    document.write('<area shape="rectangle" coords="' + coords + '" href="#" title="' + location.name + '" onclick="gSkewsMeMapper.ShowComment(\'' + location.areaCommentID + '\');" />');
  }
  document.write('</map>');
}

function State(name,description,parentPage)
{
  this.name=name;
  this.description=description;
  this.parentPage=parentPage;
  this.cities=new Array();
  
  this.AddCity=StateAddCity;
  this.FindCity=StateFindCity;
  this.DisplayCityName=StateDisplayCityName;
  
}

function StateFindCity(name)
{
  for (var i=0;i<this.cities.length;i++)
    if (this.cities[i].name==name)
      return this.cities[i];
  return null;
}

function StateDisplayCityName(name,description)
{
  return '<li class="' + this.parentPage.classCityList + '" onclick="gSkewsMeMapper.SetCity(\'' + name + '\');" style="cursor:pointer;">' + description + '</li>';
}

function StateAddCity(name,description,image,width,height,xCapitolOriginalMap,yCapitolOriginalMap,xCapitolNewMap,yCapitolNewMap,cityCommentID)
{
  var length=this.cities.push(new City(name,image,width,height,xCapitolOriginalMap,yCapitolOriginalMap,xCapitolNewMap,yCapitolNewMap,cityCommentID,this.parentPage));
  if (name!='' && description!='')
  {
    var e=document.getElementById(this.parentPage.elementIDcityList);
    if (e)
      e.innerHTML += this.DisplayCityName(name,description);
  }
  return this.cities[length-1];
}

function Page()
{
  this.states=new Array();
  this.elementIDmap='';
  this.elementIDcityList='';
  this.classCityList='';
  this.imageDirectory='';

  this.currentState='';
  this.currentCommentID='';

  this.AddState=PageAddState;
  this.FindState=PageFindState;
  this.ShowComment=PageShowComment;
}

function PageFindState(name)
{
  for (var i=0;i<this.states.length;i++)
    if (this.states[i].name==name)
      return this.states[i];
  return null;
}

function PageAddState(name,description)
{
  var e=document.getElementById(this.elementIDcityList);
  if (e)
    e.innerHTML = 'Maps<ul>';
  return this.states[this.states.push(new State(this.currentState=name,description,this))-1];
}

function PageShowComment(id)
{
  var e=document.getElementById(this.currentCommentID);
  if (e)
    e.style.display="none";

  e=document.getElementById(this.currentCommentID=id);
  if (e)
    e.style.display="block";
}

function SkewsMeMapper()
{
  if (gSkewsMeMapper) // Allow only one instance of SkewsMeMapper
    return;

  this.page=null; // UNDONE: multiple pages
  
  this.CreatePage=SkewsMeMapperCreatePage;
  this.SetCity=SkewsMeMapperSetCity;
  this.ShowComment=SkewsMeMapperShowComment;
}
var gSkewsMeMapper=new SkewsMeMapper();

function SkewsMeMapperCreatePage(name,description)
{
  return this.page=new Page(name,description);
}

function SkewsMeMapperSetCity(name)
{
  var state=this.page.FindState(this.page.currentState);
  if (state)
  {
    var city=state.FindCity(name);
    if (city)
      city.Set();
  }
}

function SkewsMeMapperShowComment(id)
{
  this.page.ShowComment(id);
}

function ToggleElement(id)
{
  var e=document.getElementById(id);
  if (e)
  {
    if (e.style.display=="none")
      e.style.display="block";
    else
      e.style.display="none";
  }
}