///////////////////////////////////////////////////////////////////////////////
//
//  wcoStoreLocator.js
//
// © 2007-2010 Wco iEnterprise Solutions Pty Ltd. ALL RIGHTS RESERVED.
// This file is licensed as part of the DataPortal 3.0 Managed Web Presence Solution, for details look here: http://www.wco.com.au
//
///////////////////////////////////////////////////////////////////////////////

HtmlStoreLocationObject = function(parentObject, index, location, parentRow) {
  this.parent = parentObject;
  this.index = index;
  this.id = location.id;
  this.name = location.name;
  this.location = location;
  
  this.cell = parentRow.insertCell(-1);
  var htm = '';
  htm += location.name.toUpperCase();
  htm += '';
  this.cell.innerHTML = htm;
  this.cell.className = 'storeTitle';
  
  this.cell.onmouseup = positioning.createDelegate(this, this.onMouseUp);
}

HtmlStoreLocationObject.prototype = {
  onMouseUp: function(e) {
    var element;

    if (!e) var e = window.event;
    if (e.target) element = e.target;
    else if (e.srcElement) element = e.srcElement;
    if (element.nodeType == 3) element = element.parentNode;
    
    this.parent.showLocationDetails(this.location);
  }
}




HtmlLocationOverlayObject = function(parentObject, parentElement) {
  this.parent = parentObject;
  
  var html = '<div id="locationOverlay" class="locationOverlay">';
  html += '<table border="0" cellpadding="0" cellspacing="0" style="width:100%; height:320px; margin:0; padding:0;">';
  html += '<tr>';
  html += '<td align="center" style="width:100%; height:320px; margin:0; padding:0;">';
  
  html += '<table id="locationOverlayBody" border="0" cellpadding="0" cellspacing="0">';
  html += '<tr>';
  html += '<td id="locationImageElement" align="right" valign="middle" style="width:450px; height:100%; margin:0; padding:0 10px 0 0;">';
  html += '';
  html += '</td>';
  html += '<td id="locationContentElement" align="left" valign="top" style="width:516px; height:100%; margin:0; padding:0 0 0 10px;">';
  
  html += '';
  
  html += '</td>';
  html += '</tr>';
  html += '</table>';
  
  html += '</td>';
  html += '</tr>';
  html += '</table>';
  html += '</div>';
  var newContent = document.createElement('DIV');
  newContent.id = 'newContent';
  newContent.innerHTML = html;
  newContent.style.display = 'none';
  this.rootElement = newContent.childNodes[0];
  parentElement.appendChild(this.rootElement);
  
  this.imageElement = positioning.getObject('locationImageElement');
  this.contentElement = positioning.getObject('locationContentElement');
  
  this.location = null;
  this.map = null;
  this.isVisible = false;
  
  this.rootElement.onmouseup = positioning.createDelegate(this, this.onMouseUp);
}

HtmlLocationOverlayObject.prototype = {
  setContent: function(location) {
    this.location = location;
    
    if (this.map != null) {
      this.imageElement.removeChild(this.map.gMap);
      this.map = null;
    }
    if (location.googleMapsHtml != '') {
      this.map = new HtmlGoogleMapObject(this, this.imageElement, location.googleMapsHtml);
      if (this.isVisible) {
        this.map.init();
      }
    }
    
    var html = '<table border="0" cellpadding="0" cellspacing="0" style="width:516px; margin:0; padding:0;">';
    html += '<tr>';
    html += '<td class="locationMenu">';
    html += '[ <u>Close</u> ]';
    html += '</td>';
    html += '</tr>';
    html += '<tr>';
    html += '<td class="locationTitle">';
    html += location.name;
    html += '</td>';
    html += '</tr>';
    if (location.streetAddress != '') {
      html += '<tr>';
      html += '<td class="locationText">';
      html += location.streetAddress;
      html += '</td>';
      html += '</tr>';
    }
    if (location.telephoneNo != '') {
      html += '<tr>';
      html += '<td class="locationText"><b>';
      html += location.telephoneNo;
      html += '</b></td>';
      html += '</tr>';
    }
    if (location.emailAddress != '') {
      html += '<tr>';
      html += '<td class="locationText">';
      html += location.emailAddress;
      html += '</td>';
      html += '</tr>';
    }
    if (location.hoursMon != '') {
      html += '<tr>';
      html += '<td class="locationHeading">';
      html += 'Hours';
      html += '</td>';
      html += '</tr>';
      html += '<tr>';
      html += '<td class="locationHoursText">';
      html += 'Mon: ' + location.hoursMon;
      html += '</td>';
      html += '</tr>';
      html += '<tr>';
      html += '<td class="locationHoursText">';
      html += 'Tue: ' + location.hoursTue;
      html += '</td>';
      html += '</tr>';
      html += '<tr>';
      html += '<td class="locationHoursText">';
      html += 'Wed: ' + location.hoursWed;
      html += '</td>';
      html += '</tr>';
      html += '<tr>';
      html += '<td class="locationHoursText">';
      html += 'Thu: ' + location.hoursThu;
      html += '</td>';
      html += '</tr>';
      html += '<tr>';
      html += '<td class="locationHoursText">';
      html += 'Fri: ' + location.hoursFri;
      html += '</td>';
      html += '</tr>';
      html += '<tr>';
      html += '<td class="locationHoursText">';
      html += 'Sat: ' + location.hoursSat;
      html += '</td>';
      html += '</tr>';
      html += '<tr>';
      html += '<td class="locationHoursText">';
      html += 'Sun: ' + location.hoursSun;
      html += '</td>';
      html += '</tr>';
    }
    html += '</table>';
    this.contentElement.innerHTML = html;
  },
  
  slideIn: function() {
    if (! this.isVisible) {
      this.isVisible = true;
      positioning.slide2ObjectDown(this.rootElement, 0, 'fast', positioning.createDelegate(this, this._slideInCompleted));
    }
  },
  
  _slideInCompleted: function() {
    this.map.init();
  },
  
  slideOut: function() {
    this.isVisible = false;
    //positioning.slide2ObjectUp(this.rootElement, -320, 'fast', positioning.createDelegate(this.parent, this.parent.start));
    positioning.slide2ObjectUp(this.rootElement, -320, 'fast');
  },
  
  reset: function() {
    this.isVisible = false;
    //positioning.slide2ObjectUp(this.rootElement, -320, 'fast', positioning.createDelegate(this.parent, this.parent.restartSlideshow));
    positioning.slide2ObjectUp(this.rootElement, -320, 'fast');
  },
  
  onMouseUp: function(e) {
    var element;

    if (!e) var e = window.event;
    if (e.target) element = e.target;
    else if (e.srcElement) element = e.srcElement;
    if (element.nodeType == 3) element = element.parentNode;
    
    this.slideOut();
  }
}




HtmlStoreLocatorObject = function(parentObject) {
  this.parent = parentObject;
  
  var htm = '<table border="0" cellpadding="0" cellspacing="0" style="width:100%; padding:0 0 15px 0;">';
  htm += '</table>';
  var newContent = document.createElement('DIV');
  newContent.id = 'newContent';
  newContent.innerHTML = htm;
  newContent.style.display = 'none';
  this.rootElement = newContent.childNodes[0];
  this.parent.locationListElement.appendChild(this.rootElement);
  
  var html = '<div id="locationOverlayElement">';
  html += '</div>';
  var newContent = document.createElement('DIV');
  newContent.id = 'newContent';
  newContent.innerHTML = html;
  newContent.style.display = 'none';
  this.locationOverlayElement = newContent.childNodes[0];
  this.parent.mainElement.appendChild(this.locationOverlayElement);
  
  this.overlay = new HtmlLocationOverlayObject(this, this.locationOverlayElement);
  
  this.items = new Array();
  
  data.getLocations(positioning.createDelegate(this, this.loadLocations));
}

HtmlStoreLocatorObject.prototype = {
  loadLocations: function(locations) {
    var row = this.rootElement.insertRow(-1);
    for (var l=0; l<locations.length; l++) {
      var idx = this.items.length;
      this.items[idx] = new HtmlStoreLocationObject(this, idx, locations[l], row);
    }
  },
  
  showLocationDetails: function(location) {
//    if (this.overlay.isVisible) {
//      this.overlay.slideOut();
//    }
//    else {
//      this.overlay.setContent(location);
//      this.overlay.slideIn();
//    }
    this.overlay.setContent(location);
    this.overlay.slideIn();
  }
}