var _ROOT_IMG_DIR_ = "/_designs/common/map_widget_images/";

function MapRegion(parent, id, formValue, name, coords) {
  
  this.id = id;
  this.formValue = formValue;
  this.name = name;
  this.coords = coords;
  this.parent = parent;
  this.__select = null;
  this.selected = false;
  this.__linkedLI = null;
  this.__linkedOpt = null;
  
  var img = document.createElement("img");
    img.setAttribute("width", "2075");
    img.setAttribute("height", "154");
    img.setAttribute("src", _ROOT_IMG_DIR_+"selects.gif");
  this.__select = img;
  this.parent.__selects.appendChild(this.__select);
  
  
  this.setLinkedLI = function(li) {
    this.__linkedLI = li;
    this.__linkedLI.onmouseover = (function(x) { return function () { return x.doRollOver() } })(this)
    this.__linkedLI.onmouseout = (function(x) { return function () { return x.doRollOut() } })(this)
    this.__linkedLI.getElementsByTagName("input")[0].onclick = (function(x) { return function () { x.toggleSelect(); } })(this)
  }
  
  this.setLinkedOption = function(opt) {
    this.__linkedOpt = opt;
    this.__linkedOpt.onclick = (function(x) { return function() { return x.toggleSelectThisOnly(); } })(this);
  }
  
  this.doRollOver = function() {
    this.parent.__hover.style.left = "-"+((this.id+1)*160+1)+"px";
    if (this.__linkedLI != null) {
      this.__linkedLI.className = "hover";
    }
    if (this.parent.__linkedTitleArea != null) { 
      this.parent.__linkedTitleArea.innerHTML = this.name;
    }
  }
  this.doRollOut = function() {
    this.parent.__hover.style.left = "0px";
    if (this.__linkedLI != null) {
      this.__linkedLI.className = "";
    }
  }
  
  this.doSelect = function() {
    this.__select.style.left = "-"+((this.id+1)*160+1)+"px";
    if (this.__linkedLI != null) {
      this.__linkedLI.getElementsByTagName("input")[0].checked = true;
    }
    this.parent.updateLinkedFormElm();
  }
  this.doUnselect = function() {
    this.__select.style.left = "0px";
    if (this.__linkedLI != null) {
      this.__linkedLI.getElementsByTagName("input")[0].checked = false;
    }
    this.parent.updateLinkedFormElm();
  }
  
  this.toggleSelectThisOnly = function() {
    this.parent.deselectAll();
    this.toggleSelect();
  }
  
  this.toggleSelect = function() {
    this.selected = !this.selected;
    if (this.selected) {
      this.doSelect();
    } else {
      this.doUnselect();
    }
    //return false;
  }
  
}

function MapWidget(Elm) {
  
  this.delimeter = " "; // delimeter used in linked form element string
  
  /* -- build self element -- */
  this.__self = Elm;
    this.__selects = document.createElement("div");
    this.__selects.className = "selects";
    this.__self.appendChild(this.__selects);
    var img = document.createElement("img");
      img.setAttribute("width", "2075");
      img.setAttribute("height", "154");
      img.setAttribute("src", _ROOT_IMG_DIR_+"hovers.gif");
    this.__hover = img;
    this.__self.appendChild(this.__hover);
      var img = document.createElement("img");
      img.setAttribute("width", "154");
      img.setAttribute("height", "154");
      img.setAttribute("src", _ROOT_IMG_DIR_+"map_blank.gif");
      img.setAttribute("usemap" , "#mwm",  0); // IE only 3rd param, work around for useMap known issue
    this.__self.appendChild(img);
    
    
    
    
  this.regions = null;
  this.__imap = null;
  this.__linkedFormElm = null;
  this.__linkedTitleArea == null;
  this.__linkedSelectBox = null;
  this.__linkedSelectBoxMulti = null;
  
  this.init = function() {
    this.regions = new Array();
    // SQUIZ can change the 3rd attribute of MapRegion to what ever is needed by the search //
        
    this.regions.push(new MapRegion(this, 3,  '9002719',  'Devonport, Cradle Mountain and the Great Western Tiers', "62,92,59,88,60,71,64,66,67,61,68,54,76,58,86,57,86,61,94,71,95,72,89,79,88,84,83,88,74,90,64,92"));
    this.regions.push(new MapRegion(this, 6,  '9002669',    'New Norfolk, Derwent Valley and Central Highlands', "63,122,62,117,62,95,68,92,78,90,85,89,88,87,90,83,90,80,93,84,95,88,97,92,97,114,98,117,94,121,90,126,85,130,70,129"));
    this.regions.push(new MapRegion(this, 7,  '9002675',  'Port Arthur, Tasman Peninsula and the South East', "110,114,109,106,116,102,118,108,124,112,125,117,122,120,126,123,126,126,124,128,125,131,126,130,126,135,120,136,116,130,116,126,117,124,116,122,112,120"));
    this.regions.push(new MapRegion(this, 9,  '9002673',  'Stanley and the North West', "40,75,35,67,35,64,33,55,30,54,33,48,33,43,34,40,35,30,41,30,40,34,36,33,36,38,34,38,34,40,34,41,38,42,40,38,44,42,40,42,44,45,44,45,51,45,51,46,57,47,68,54,66,62,60,71,53,74,48,76"));
    this.regions.push(new MapRegion(this, 1,  '9002670',     'Hobart & Surrounds', "98,120,101,117,103,116,110,116,113,123,115,126,112,128,109,129,108,128,106,129,98,125"));
    this.regions.push(new MapRegion(this, 10, '9002674',  'Strahan, Queenstown and the West Coast', "60,127,58,126,54,117,54,114,50,110,49,102,49,97,50,92,50,90,40,79,40,75,48,76,59,72,59,88,62,94,61,98,61,117,62,119,62,124"));
    this.regions.push(new MapRegion(this, 2,  '9002245',       'Coles Bay, Freycinet and the East Coast', "117,102,120,100,121,94,124,91,124,81,128,79,134,79,136,87,135,91,136,95,136,103,132,102,133,95,129,92,126,102,126,109,130,111,131,114,128,118,125,116,124,111,119,106"));
    this.regions.push(new MapRegion(this, 4,  '9002206 9002212',    'Flinders, King and other Islands', "8,21,9,15,8,13,9,9,8,6,11,3,11,0,16,4,16,11,120,11,123,8,124,4,126,4,132,12,138,13,136,15,137,24,140,29,141,33,138,33,135,31,133,36,130,36,128,32,126,30,127,27,138,26,136,24,134,22,132,22,132,24,128,25,128,18,123,15,124,12,120,11,16,11,17,16,16,16,16,18,10,22"));
    this.regions.push(new MapRegion(this, 8,  '9002677',   'Ross, Oatlands and the Midlands', "99,116,98,114,98,91,93,82,92,81,92,78,96,73,102,73,104,70,115,70,115,67,117,67,122,73,123,91,119,96,119,100,109,106,109,115"));
    this.regions.push(new MapRegion(this, 0,  '9002262',       'Huon, Bruny and the South West', "61,128,63,123,71,130,75,131,86,130,92,127,98,120,98,126,106,130,108,128,111,135,108,138,108,145,106,146,104,144,99,143,97,149,91,150,87,146,74,148,72,147,69,140,70,138,66,138"));
    this.regions.push(new MapRegion(this, 5,  '9002671', 'Launceston and Tamar Valley', "86,60,87,56,98,51,103,51,103,58,108,61,108,63,114,67,114,69,103,69,102,72,96,72"));
    this.regions.push(new MapRegion(this, 11, '9002672',   'St Helens and the North East', "103,51,108,50,111,53,113,51,116,44,122,47,124,46,126,41,136,51,136,55,134,55,135,61,136,64,134,71,136,75,135,78,124,78,122,72,117,66,114,66,108,62,108,59,104,57"));    
    
    this.createImap();
    this.createCheckList();
  }
  
  
  this.createImap = function() {
    var map = document.createElement("map");
    map.setAttribute("name", "mwm");
    map.setAttribute("id", "mwm");
    
    var area;
    //for (var ii in this.regions) {
    for (var ii=0; ii<this.regions.length; ii++) {
      area = document.createElement("area");
      area.setAttribute("alt", this.regions[ii].name);
      area.setAttribute("shape", "poly");
      area.setAttribute("coords", this.regions[ii].coords);
      area.setAttribute("href", "#");
      area.setAttribute("name", this.regions[ii].id);
      
      area.onmouseover = (function(x) { return function () { return x.doRollOver() } })(this.regions[ii])
      area.onmouseout = (function(x) { return function () { return x.doRollOut() } })(this.regions[ii])
      area.onclick = (function(x) { return function () { x.toggleSelect(); return false; } })(this.regions[ii]);
      map.appendChild(area);
    }
    this.__imap = map;
    this.__self.appendChild(this.__imap);
  }
  
  this.createCheckList = function() {
    var ul = document.createElement("ul");
    var li, label, input;
    //for (var ii in this.regions) {
    for (var ii=0; ii<this.regions.length; ii++) {
      li = document.createElement("li");
      input = document.createElement("input");
      input.setAttribute("type", "checkbox");
      input.setAttribute("id", "smcid"+ii);
        label = document.createElement("label");
        label.setAttribute("for", "smcid"+ii);
        label.innerHTML = this.regions[ii].name;
        li.appendChild(input);
        li.appendChild(label);
      ul.appendChild(li);
      this.regions[ii].setLinkedLI(li);
    }
    return ul;
  }
  
  this.linkToFormElement = function(elm) {
    this.__linkedFormElm = elm;
  }
  this.linkToTitleArea= function(elm) {
    this.__linkedTitleArea = elm;
  }
  this.updateLinkedFormElm = function() {
        if (this.__linkedFormElm == null) {
            this.updateLinkedFormElmSelect();
        } else {
            this.updateLinkedFormElmText();
        }
  }


  this.updateLinkedFormElmText = function() {
    if (this.__linkedFormElm == null) return;
    var val = "";
    //for (var ii in this.regions) {
    for (var ii=0; ii<this.regions.length; ii++) {
      if (!this.regions[ii].selected) continue;
      val += ((val != '') ? this.delimeter : '')+this.regions[ii].formValue;
    }
    this.__linkedFormElm.value = val;
  }
  
  
  this.linkToSelectBox = function(elm) {
    this.__linkedSelectBox = elm;
    var opt = null;
    
    for (var ii=0; ii<this.regions.length; ii++) {
      opt = document.createElement("option");
      opt.setAttribute("id", "smcid"+ii);
      opt.setAttribute("value", this.regions[ii].formValue);
      opt.innerHTML = this.regions[ii].name;
      this.__linkedSelectBox.appendChild(opt);
      this.regions[ii].setLinkedOption(opt);
    }
     opt = document.createElement("option");
     opt.setAttribute("id", "smcid"+"multi");
     opt.setAttribute("value", "multi");
     opt.innerHTML = "Multiple";
     this.__linkedSelectBoxMulti = opt;
     this.__linkedSelectBox.appendChild(this.__linkedSelectBoxMulti);
  }
  
  this.updateLinkedFormElmSelect = function() {
    if (this.__linkedSelectBox == null) return;
    var val = "";
    var count = 0;
    //for (var ii in this.regions) {
    for (var ii=0; ii<this.regions.length; ii++) {
      if (!this.regions[ii].selected) continue;
      count++;
      this.regions[ii].__linkedOpt.selected = true;
      val += ((val != '') ? this.delimeter : '')+this.regions[ii].formValue;
    }
    this.__linkedSelectBox.getElementsByTagName("option")[0].selected = (count == 0);
    this.__linkedSelectBoxMulti.selected = (count > 1);
    // this.__linkedSelectBoxMulti.disabled = !(this.__linkedSelectBoxMulti.selected);
    // this.__linkedSelectBox.disabled = (count > 1);
    this.__linkedSelectBoxMulti.setAttribute("value", val);
  }
  
  this.deselectAll = function() {
    for (var ii=0; ii<this.regions.length; ii++) {
      if (!this.regions[ii].selected) continue;
      this.regions[ii].toggleSelect();
    }
  }
  
  this.init();
}