///////////////////////////////////////////////////////////////////////////////
//
//  wcoSlideshow.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
//
///////////////////////////////////////////////////////////////////////////////

HtmlSlideObject = function(parentObject, index, outfit, parentElement) {
  this.parent = parentObject;
  this.index = index;
  this.name = outfit.name;
  this.outfit = outfit;
  
  var html = '<div id="slide' + index + '" class="slide">';
  html += '<img src="ssl/images/' + outfit.displayImage + '" style="width:966px; height:600px;" alt="' + outfit.name + '" title="' + outfit.name + '" />';
  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);
}

HtmlSlideObject.prototype = {
  slideIn: function() {
    this.rootElement.style.zIndex = 101;
    positioning.slideObjectDown(this.rootElement, 0, 'medium', positioning.createDelegate(this.parent, this.parent.continueSlideshow));
  },
  
  reset: function() {
    positioning.setObjectTop(this.rootElement, -600);
    this.rootElement.style.zIndex = 100;
  }
}

HtmlSlideOverlayObject = function(parentObject, parentElement) {
  this.parent = parentObject;
  
  var html = '<div id="slideOverlay" class="slideOverlay">';
  html += '<table border="0" cellpadding="0" cellspacing="0" style="width:100%; height:600px; margin:0; padding:0;">';
  html += '<tr>';
  html += '<td align="center" style="width:100%; height:600px; margin:0; padding:0;">';
  
  html += '<table id="slideOverlayBody" border="0" cellpadding="0" cellspacing="0">';
  html += '<tr>';
  html += '<td id="overlayContentElement" align="left" valign="top" style="width:282px; margin:0; padding:0 0 0 10px;">';
  
  html += '';
  
  html += '</td>';
  html += '<td id="overlayImageElement" align="left" valign="middle" style="height:100%; margin:0; padding:0;">';
  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('overlayImageElement');
  this.contentElement = positioning.getObject('overlayContentElement');
  
  this.outfit = null;
  this.isVisible = false;
}

HtmlSlideOverlayObject.prototype = {
  setContent: function(outfit) {
    this.outfit = outfit;
    
    this.imageElement.innerHTML = '<img src="ssl/images/' + outfit.thumbnailImage + '" style="width:' + outfit.thumbnailWidth + 'px; height:' + outfit.thumbnailHeight + 'px;" alt="' + outfit.name + '" title="' + outfit.name + '" />';
    
    var html = '<table border="0" cellpadding="0" cellspacing="0" style="width:252px; margin:0; padding:0;">';
    for (var p=0; p<outfit.products.length; p++) {
      var product = outfit.products[p];
      html += '<tr>';
      html += '<td class="productStyle">';
      html += product.style;
      html += '</td>';
      html += '</tr>';
      if (product.label != '') {
        html += '<tr>';
        html += '<td class="productLabel">';
        html += product.label;
        if (product.origin != '') {
          html += ', ' + product.origin;
        }
        html += '</td>';
        html += '</tr>';
      }
      if (product.colours != '') {
        html += '<tr>';
        html += '<td class="productColours">';
        html += 'Colours: ' + product.colours;
        html += '</td>';
        html += '</tr>';
      }
      if (product.sizes != '') {
        html += '<tr>';
        html += '<td class="productSizes">';
        html += 'Sizes: ' + product.sizes;
        html += '</td>';
        html += '</tr>';
      }
    }
    html += '</table>';
    this.contentElement.innerHTML = html;
  },
  
  slideIn: function() {
    this.isVisible = true;
    positioning.slide2ObjectDown(this.rootElement, 0, 'fast');
  },
  
  slideOut: function() {
    this.isVisible = false;
    positioning.slide2ObjectUp(this.rootElement, -600, 'fast', positioning.createDelegate(this.parent, this.parent.start));
  },
  
  reset: function() {
    this.isVisible = false;
    positioning.slide2ObjectUp(this.rootElement, -600, 'fast', positioning.createDelegate(this.parent, this.parent.restartSlideshow));
  }
}





HtmlRemoteControlMenuObject = function(parentObject, index, outfit, parentTable) {
  this.parent = parentObject;
  this.index = index;
  this.id = outfit.id;
  this.name = outfit.name;
  
  var row = parentTable.insertRow(-1);
  this.cell = row.insertCell(-1);
  this.cell.innerHTML = outfit.name;
  this.cell.className = 'menuItem';
  
  this.isSelected = false;
  this.isMouseOver = false;
  
  this.cell.onmouseup = positioning.createDelegate(this, this.onMouseUp);
  this.cell.onmouseover = positioning.createDelegate(this, this.onMouseOver);
  this.cell.onmouseout = positioning.createDelegate(this, this.onMouseOut);
}

HtmlRemoteControlMenuObject.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.goTo(this.index);
  },
  
  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;
    
    if (! this.isSelected) {
      this.isMouseOver = true;
      this.cell.className = 'menuItemHilite';
    }
  },
  
  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 (! this.isSelected) {
      this.isMouseOver = false;
      this.cell.className = 'menuItem';
    }
  },
  
  select: function() {
    this.isSelected = true;
    this.isMouseOver = false;
    this.cell.className = 'menuItemSelected';
  },
  
  unselect: function() {
    if (! this.isMouseOver) {
      this.isSelected = false;
      this.cell.className = 'menuItem';
    }
  }
}

HtmlRemoteControlObject = function(parentObject, parentElement) {
  this.parent = parentObject;
  
  var html = '<div id="controlPartsElement" style="text-align:center;">';
  html += '<table border="0" cellpadding="0" cellspacing="0" style="width:100%; height:43px; margin:0; padding:0;">';
  html += '<tr>';
  html += '<td align="center" style="width:100%; height:43px; margin:0; padding:0;">';
  
  html += '<table border="0" cellpadding="0" cellspacing="0" style="width:946px; height:43px; margin:0; padding:0;">';
  html += '<tr>';
  html += '<td align="right" style="width:691px; height:43px; margin:0; padding:0;">';
  html += '<img src="ssl/images/spacer.gif" style="width:691px; height:43px;" alt="" />';
  html += '</td>';
  html += '<td id="remoteControlMenuElement" align="left" valign="middle" style="width:155px; height:43px; margin:0; padding:0; background-image:url(\'ssl/images/RemoteTitlePanel.png\'); background-position:center top; background-repeat:no-repeat; cursor:pointer;">';
  html += '<div>';
  html += '<p id="remoteControlTitleText" style="margin:0 5px 0 5px; padding:0; font-family:\'Arial\', \'Tahoma\'; font-size:10pt; font-weight:normal; color:#FFFFFF; text-align:center;">';
  html += '';
  html += '</p>';
  html += '</div>';
  html += '<div style="position:absolute; top:43px; width:155px; text-align:left;">';
  html += '<table id="remoteControlDropdownMenuElement" border="0" cellpadding="0" cellspacing="1" style="width:100%; margin:0; padding:0; display:none;background-color:transparent; background-image:url(\'ssl/images/MenuBkg.png\'); background-repeat:repeat;">';
  html += '';
  html += '</table>';
  html += '</div>';
  html += '</td>';
  html += '<td align="right" style="width:5px; height:43px; margin:0; padding:0;">';
  html += '<img src="ssl/images/spacer.gif" style="width:5px; height:43px;" alt="" />';
  html += '</td>';
  html += '<td id="remoteControlStopBtn" align="right" style="width:43px; height:43px; margin:0; padding:0; cursor:pointer;">';
  html += '<img src="ssl/images/RemoteStopPanel.png" style="width:43px; height:43px;" alt="Stop & view outift detail" title="View outfit details..." />';
  html += '</td>';
  html += '<td align="right" style="width:5px; height:43px; margin:0; padding:0;">';
  html += '<img src="ssl/images/spacer.gif" style="width:5px; height:43px;" alt="" />';
  html += '</td>';
  html += '<td id="remoteControlStartPauseBtn" align="right" style="width:47px; height:43px; margin:0; padding:0; cursor:pointer;">';
  html += '<img src="ssl/images/RemotePausePanel.png" style="width:47px; height:43px;" alt="Pause slideshow" title="Pause slideshow" />';
  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.titleTextElement = positioning.getObject('remoteControlTitleText');
  this.menuElement = positioning.getObject('remoteControlMenuElement');
  this.menuDropdownElement = positioning.getObject('remoteControlDropdownMenuElement');
  this.stopBtn = positioning.getObject('remoteControlStopBtn');
  this.startPauseBtn = positioning.getObject('remoteControlStartPauseBtn');
  
  this.stopBtn.onmouseup = positioning.createDelegate(this, this.onStop);
  this.startPauseBtn.onmouseup = positioning.createDelegate(this, this.onStartPause);
  this.menuElement.onmouseover = positioning.createDelegate(this, this.onMouseOverMenu);
  this.menuElement.onmouseout = positioning.createDelegate(this, this.onMouseOutMenu);
  
  this.menuItems = new Array();
  this.isPaused = false;
}

HtmlRemoteControlObject.prototype = {
  init: function(outfits) {
    for (var o=0; o<outfits.length; o++) {
      var idx = this.menuItems.length;
      this.menuItems[idx] = new HtmlRemoteControlMenuObject(this, idx, outfits[o], this.menuDropdownElement);
    }
  },
  
  setTitleText: function(title) {
    this.titleTextElement.innerHTML = title.toUpperCase();
  },
  
  updateContent: function(index) {
    this.titleTextElement.innerHTML = this.menuItems[index].name.toUpperCase();
    for (var i=0; i<this.menuItems.length; i++) {
      this.menuItems[i].unselect();
    }
    this.menuItems[index].select();
  },
  
  setStartBtn: function() {
      this.startPauseBtn.innerHTML = '<img src="ssl/images/RemotePausePanel.png" style="width:47px; height:43px;" alt="Pause slideshow" title="Pause slideshow" />';
      this.stopBtn.childNodes[0].title = 'View outfit details...';
      this.isPaused = false;
  },
  
  goTo: function(index) {
    this.parent.goToSlide(index);
  },
  
  onMouseOverMenu: 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;
    
    positioning.showObject(this.menuDropdownElement);
  },
  
  showDropdownMenu: function() {
    positioning.showObject(this.menuDropdownElement);
  },
  
  hideDropdownMenu: function() {
    positioning.hideObject(this.menuDropdownElement);
    //positioning.fadeOut2(this.menuDropdownElement, 'fast');
  },
  
  onMouseOutMenu: 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;
    
    positioning.hideObject(this.menuDropdownElement);
  },
  
  onStop: 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 (! this.isPaused) {
      this.startPauseBtn.innerHTML = '<img src="ssl/images/RemoteStartPanel.png" style="width:47px; height:43px;" alt="Pause slideshow" title="Start slideshow" />';
      this.parent.stop();
    }
    if (this.parent.overlay.isVisible) {
      this.stopBtn.childNodes[0].title = 'View outfit details...';
      this.parent.hideOverlay();
    }
    else {
      this.stopBtn.childNodes[0].title = 'Hide outfit details...';
      this.parent.showOverlay();
    }
    this.isPaused = true;
  },
  
  onStartPause: 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 (this.isPaused) {
      this.stopBtn.childNodes[0].title = 'View outfit details...';
      this.startPauseBtn.innerHTML = '<img src="ssl/images/RemotePausePanel.png" style="width:47px; height:43px;" alt="Pause slideshow" title="Pause slideshow" />';
      this.parent.start();
      this.isPaused = false;
    }
    else {
      this.startPauseBtn.innerHTML = '<img src="ssl/images/RemoteStartPanel.png" style="width:47px; height:43px;" alt="Pause slideshow" title="Start slideshow" />';
      this.parent.stop();
      this.isPaused = true;
    }
  }
}





///////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////
/*<remarks>
Name:        HtmlSlideshowObject Class
Method:      constructor
Description: Instantiates a new instance of the slideshow object.
Parameters:  parentObject: the parent script object that instantiated this object
</remarks>*/
HtmlSlideshowObject = function(parentObject) {
  this.parent = parentObject;
  
  var html = '<div id="slideshowElement">';
  html += '</div>';
  var newContent = document.createElement('DIV');
  newContent.id = 'newContent';
  newContent.innerHTML = html;
  newContent.style.display = 'none';
  this.rootElement = newContent.childNodes[0];
  this.parent.mainElement.appendChild(this.rootElement);
  
  var html = '<div id="remoteControlElement">';
  html += '</div>';
  var newContent = document.createElement('DIV');
  newContent.id = 'newContent';
  newContent.innerHTML = html;
  newContent.style.display = 'none';
  this.remoteControlElement = newContent.childNodes[0];
  this.parent.mainElement.appendChild(this.remoteControlElement);
  
  this.overlay = new HtmlSlideOverlayObject(this, this.rootElement);
  this.remoteControl = new HtmlRemoteControlObject(this, this.remoteControlElement);
  
  this.isInitialised = false;
  this.currentIndex = 0;
  this.currentSlide = null;
  this.previousSlide = null;
  this.items = new Array();
  
  data.getOutfits(positioning.createDelegate(this, this.loadSlides));
}

//-----------------------------------------------------------------------------
/*<remarks>
  Description: Defines the HtmlSlideshowObject Class methods.
</remarks>*/
HtmlSlideshowObject.prototype = {
  loadSlides: function(outfits) {
    for (var o=0; o<outfits.length; o++) {
      var idx = this.items.length;
      this.items[idx] = new HtmlSlideObject(this, idx, outfits[o], this.rootElement);
    }
    this.currentSlide = this.items[0];
    
    this.remoteControl.init(outfits);
    this.remoteControl.showDropdownMenu();
    
    this.start();
  },
  
  start: function() {
    if (this.overlay.isVisible) {
      this.overlay.slideOut();
    }
    else {
      this.currentSlide = this.items[this.currentIndex];
      this.currentSlide.slideIn();
      //this.remoteControl.setTitleText(this.currentSlide.outfit.name);
      this.remoteControl.updateContent(this.currentIndex);
    }
  },
  
  restartSlideshow: function() {
    positioning.delayAction(10000, positioning.createDelegate(this, this.start));
    this.remoteControl.setStartBtn();
  },
  
  continueSlideshow: function() {
    if (! this.isInitialised) {
      this.isInitialised = true;
      this.remoteControl.hideDropdownMenu();
    }
    positioning.delayAction(10000, positioning.createDelegate(this, this.next));
  },
  
  goToSlide: function(index) {
    this.stop();
    
    this.remoteControl.setStartBtn();
    this.currentIndex = index;
    this.start();
  },
  
  next: function() {
    if (this.currentSlide != null) {
      if (this.previousSlide != null) {
        this.previousSlide.reset();
      }
      this.currentSlide.rootElement.style.zIndex = 100;
      this.previousSlide = this.currentSlide;
        
      this.currentIndex = this.currentSlide.index + 1;
      if (this.currentIndex >= this.items.length) {
        this.currentIndex = 0;
      }
      this.currentSlide = this.items[this.currentIndex];
      this.currentSlide.slideIn();
      //this.remoteControl.setTitleText(this.currentSlide.outfit.name);
      this.remoteControl.updateContent(this.currentIndex);
    }
  },
  
  previous: function() {
  
  },
  
  stop: function() {
    positioning.delayStop();
    
    if (this.currentSlide != null) {
      if (this.previousSlide != null) {
        this.previousSlide.reset();
      }
      this.currentSlide.rootElement.style.zIndex = 100;
      this.previousSlide = this.currentSlide;
      
      this.currentIndex = this.currentSlide.index + 1;
      if (this.currentIndex >= this.items.length) {
        this.currentIndex = 0;
      }
      this.currentSlide = null;
    }
  },
  
  showOverlay: function() {
    this.overlay.setContent(this.previousSlide.outfit);
    this.overlay.slideIn();
  },
  
  hideOverlay: function() {
    this.overlay.reset();
  }
  
}