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

//--------------------------------------------------------------------------------
HtmlSlideTabObject = function(parentObject, parentElement, index, jsonDataNode) {
  this.parent = parentObject;
  this.index = index;
  this.name = 'tab_' + this.index;
  
  this.title = jsonDataNode.title;
  
  var left = (this.index * 230) + (this.index * 8);
  
  switch (this.index) {
    case 1:  // Tour the Clinic
      this.top = 388 - 250;
      this.height = 262;
      var html = '<div id="tabPanel' + this.index + '" style="position:absolute; top:' + this.top + 'px; left:' + left + 'px; width:230px; height:' + this.height + 'px; z-index:500; margin:0; padding:0;">';
        html += '<div style="position:absolute; top:0px; left:0px; width:100%; height:250px; margin:0; padding:0; text-align:left; vertical-align:top; background-color:#ffffff;">';
          html += '<div class="TabLink" style="position:absolute; top:0px; left:5px; width:220px; height:15px;">';
          html += '[<a class="TabLink" href="javascript:void(0);">Close</a>]';
          html += '</div>';
          html += '<div id="tabContent' + this.index + '" style="position:absolute; top:15px; left:5px; width:220px; height:220px;">';
          html += '';
          html += '';
          html += '';
          html += '';
          html += '';
          html += '';
          html += '</div>';
          html += '<div class="TabLink" style="position:absolute; top:235px; left:5px; width:220px; height:15px;">';
          html += '[<a class="TabLink" href="javascript:void(0);">Close</a>]';
          html += '</div>';
        html += '</div>';
        html += '<div id="TabTitle_' + this.index + '" class="TabTitle" style="position:absolute; top:250px; left:0px; width:100%; height:12px; margin:0; padding:2px 0 0 0; text-align:center; vertical-align:middle; background-image:url(\'ssl/images/bkg_15.png\'); background-repeat:repeat;">';
        html += this.title;
        html += '</div>';
      html += '</div>';
      break;
      
    case 2:  // Document Library
      this.top = 388 - 388;
      this.height = 400;
      var html = '<div id="tabPanel' + this.index + '" style="position:absolute; top:' + this.top + 'px; left:' + left + 'px; width:230px; height:' + this.height + 'px; z-index:500; margin:0; padding:0;">';
        html += '<div style="position:absolute; top:0px; left:0px; width:100%; height:388px; margin:0; padding:0; text-align:left; vertical-align:top; background-color:#ffffff;">';
          html += '<div class="TabLink" style="position:absolute; top:0px; left:5px; width:220px; height:15px;">';
          html += '[<a class="TabLink" href="javascript:void(0);">Close</a>]';
          html += '</div>';
          html += '<div id="tabContent' + this.index + '" style="position:absolute; top:15px; left:5px; width:220px; height:358px;">';
          html += '';
          html += '';
          html += '';
          html += '';
          html += '';
          html += '';
          html += '</div>';
          html += '<div class="TabLink" style="position:absolute; top:373px; left:5px; width:220px; height:15px;">';
          html += '[<a class="TabLink" href="javascript:void(0);">Close</a>]';
          html += '</div>';
        html += '</div>';
        html += '<div id="TabTitle_' + this.index + '" class="TabTitle" style="position:absolute; top:388px; left:0px; width:100%; height:12px; margin:0; padding:2px 0 0 0; text-align:center; vertical-align:middle; background-image:url(\'ssl/images/bkg_15.png\'); background-repeat:repeat;">';
        html += this.title;
        html += '</div>';
      html += '</div>';
      break;
      
    default:  // Contact Us
      this.top = 388 - 388;
      this.height = 400;
      var html = '<div id="tabPanel' + this.index + '" style="position:absolute; top:' + this.top + 'px; left:' + left + 'px; width:230px; height:' + this.height + 'px; z-index:500; margin:0; padding:0;">';
      html += '<table cellpadding="0" cellspacing="0" style="width:230px; height:100%; margin:0; padding:0;">';
      html += '<tr>';
      html += '<td style="width:100%; height:388px; margin:0; padding:0; background-color:#ffffff;">';
        html += '<table cellpadding="0" cellspacing="0" style="width:220px; height:100%; margin:0 0 0 5px; padding:0;">';
        html += '<tr>';
        html += '<td class="TabLink" style="width:100%; height:12px; margin:0; padding:0; text-align:right; vertical-align:middle;">';
        html += '[<a class="TabLink" href="javascript:void(0);">Close</a>]';
        html += '</td>';
        html += '</tr>';
        html += '<tr>';
        html += '<td id="tabContent' + this.index + '" style="width:100%; margin:0; padding:0; text-align:center; vertical-align:top;">';
        html += '<div style="margin:2px 0 0 0; padding:0;"></div>';
        html += '<iframe width="218" height="288" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" style="border:solid 1px #333333;" src="http://maps.google.com.au/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Contraceptive+Services&amp;sll=-33.864472,151.20582&amp;sspn=0.011653,0.022466&amp;ie=UTF8&amp;cid=7410598644232527603&amp;ll=-33.867458,151.212516&amp;spn=0.01069,0.009441&amp;z=15&amp;output=embed"></iframe>';
        html += '<br style="margin:0; padding:3px 0 0 0;" />';
        html += '<a class="Gmap" href="javascript:void(0);" onclick="javascript:window.open(\'http://maps.google.com.au/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=contraceptive+services+loc:+Sydney+New+S+Wales&amp;sll=-33.84807,151.123396&amp;sspn=0.17935,0.359459&amp;gl=au&amp;ie=UTF8&amp;cid=7410598644232527603&amp;ll=-33.864928,151.212473&amp;spn=0.01069,0.009441&amp;z=15\');">View Larger Map</a>';
        html += '</td>';
        html += '</tr>';
        html += '<tr>';
        html += '<td class="ContactDetails" style="width:100%; margin:0; padding:0; text-align:left; vertical-align:top;">';
        html += '<b style="font-size:12pt;">Contraceptive Services</b><br />';
        html += 'Level 1, 195 Macquarie Street, Sydney<br />';
        html += 'Tel: <b>(02) 9221 1933</b>  Fax: (02) 9233 1644<br />';
        html += '</td>';
        html += '</tr>';
        html += '<tr>';
        html += '<td class="TabLink" style="width:100%; height:12px; margin:0; padding:0; text-align:right; vertical-align:middle;">';
        html += '[<a class="TabLink" href="javascript:void(0);">Close</a>]';
        html += '</td>';
        html += '</tr>';
        html += '</table>';
      html += '</td>';
      html += '</tr>';
      html += '<tr>';
      html += '<td id="TabTitle_' + this.index + '" class="TabTitle" style="width:100%; height:12px; margin:0; padding:2px 0 0 0; text-align:center; vertical-align:middle; background-image:url(\'ssl/images/bkg_15.png\'); background-repeat:repeat;">';
      html += this.title;
      html += '</td>';
      html += '</tr>';
      html += '</table>';
      html += '</div>';
      break;
  }
  
  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.tab = positioning.getObject('TabTitle_' + this.index);
  this.content = positioning.getObject('tabContent' + this.index);
  
  if (this.index == 1) {
    // instantiate a slide show manager for the 'Tour the Clinic' tab
    this.slideshow = new HtmlSlideCollection(this, this.content, 220, 220);
    
  }
  if (this.index == 2) {
    // instantiate a document collection manager for the 'Document Library' tab
    this.library = new HtmlDocumentCollection(this, this.content, 220, 358);
    
  }
  
  this.rootElement.onmouseover = positioning.createDelegate(this, this.onMouseOver);
  this.rootElement.onmouseout = positioning.createDelegate(this, this.onMouseOut);
  this.rootElement.onmouseup = positioning.createDelegate(this, this.onMouseUp);
}

HtmlSlideTabObject.prototype = {
  onMouseOver: 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.tab.style.backgroundColor = '#333333';
    this.tab.style.color = '#ffffff';
    this.tab.style.fontWeight = 'bold';
  },
  
  onMouseOut: 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;
    
    if (positioning.getObjectTop(this.rootElement) == this.top) {
      this.tab.style.backgroundColor = '';
      this.tab.style.color = '';
      this.tab.style.fontWeight = '';
    }
  },
  
  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;
    
    // slide the tab down into view
    var toY = this.top; // -- slide up
    if (positioning.getObjectTop(this.rootElement) == this.top) {
      toY = 388; //(positioning.getObjectHeight(this.rootElement) - 12); -- slide down
      if (this.slideshow) {
        this.slideshow.start();
      }
    }
    else {
      this.tab.style.backgroundColor = '';
      this.tab.style.color = '';
      this.tab.style.fontWeight = '';
      if (this.slideshow) {
        this.slideshow.stop();
      }
    }
    positioning.setObjectTop(this.rootElement, toY);
  }
  
}

//--------------------------------------------------------------------------------
HtmlSlideTabCollection = function(parentObject) {
  this.parent = parentObject;
  
  var html = '<div id="dropdownPanel" style="position:absolute; top:-388px; left:0px; width:706px; height:400px; z-index:500; background-color:transparent; display:none; cursor:default;">';
  html += '';
  html += '</div>';
  var newContent = document.createElement('DIV');
  newContent.id = 'newContent';
  newContent.innerHTML = html;
  newContent.style.display = 'none';
  this.rootElement = newContent.childNodes[0];
  this.parent.contentPane.appendChild(this.rootElement);
  
  // declare and initialise the module's object & collection properties
  this.item = new Array();
  
  var data = {
              title: 'CONTACT AND FIND US'
             }
  this.add(data);
  var data = {
              title: 'TOUR THE CLINIC'
             }
  this.add(data);
  var data = {
              title: 'DOCUMENT LIBRARY'
             }
  this.add(data);
}

HtmlSlideTabCollection.prototype = {
  add: function(jsonDataNode) {
    if (jsonDataNode) {
      // get the index of the new tab object
      var index = this.item.length;
      
      // create the new tab object
      this.item[index] = new HtmlSlideTabObject(this.parent, this.rootElement, index, jsonDataNode);
    }
  },
  
  show: function() {
    positioning.showObject(this.rootElement);
  },
  
  hide: function() {
    positioning.hideObject(this.rootElement);
  },
  
  redoLayout: function() {
    var w = windowGeometry.getViewportWidth();
    
    positioning.setObjectLeft(this.rootElement, (w/2)-228);
  }
  
}