///////////////////////////////////////////////////////////////////////////////
//
//  wcoStoreLocator.js
//
// © 2007-2011 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 = 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" style="width:100%; height:100%; margin:0; padding: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);
  $(parentElement).append(html);
  
  this.rootElement = $('#locationOverlay')[0];
  this.imageElement = $('#locationImageElement')[0];
  this.contentElement = $('#locationContentElement')[0];
  
  this.location = null;
  this.map = null;
  this.isVisible = false;
  
  this.rootElement.onmouseup = 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 == 'QVB' ? 'Queen Victoria Building' : 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;
      $( this.rootElement ).animate( {
        top: '+=320'
      }, 'fast', 'swing', createDelegate( this, this._slideInCompleted ) );
    }
  },

  _slideInCompleted: function () {
    if ( this.map ) {
      this.map.init();
    }
  },

  slideOut: function () {
    this.isVisible = false;
    $( this.rootElement ).animate( {
      top: '-=320'
    }, 'fast' );
  },

  reset: function () {
    this.isVisible = false;
    $( this.rootElement ).animate( {
      top: '-=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(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();
  }
}