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

HtmlSlideObject = function (parentObject, index, ancestorData, currentData, initX) {
  this.parent = parentObject;
  this.index = index;
  this.id = currentData.Id;
  this.name = currentData.Name;

  this.imageWidth = 668 + 'px';
  this.ancestorData = ancestorData;
  this.currentData = currentData;

  //var html = '<div id="navigatorSlide-' + index + '" style="position:absolute; top:0px; left:' + initX + 'px; width:716px; height:350px; margin:0; padding:0; background-color:#606F68; text-align:left; cursor:default;">';
  var html = '<div id="navigatorSlide-' + index + '" style="position:absolute; top:0px; left:' + initX + 'px; width:48px; height:350px; margin:0; padding:0; background-color:#606F68; text-align:left; cursor:default;">';
  html += '<div id="navigatorSlideBtn-' + index + '">';
  //alert('ssl/images/Section' + (index + 1) + '_Btn_out-' + this.parent.languagebar.items[this.parent.languagebar.currentLanguageIdx].languageId + '.jpg');
  html += '<img id="navigatorSlideBtnImg-' + index + '" src="ssl/images/Section' + (index + 1) + '_Btn_out-' + this.parent.languagebar.items[this.parent.languagebar.currentLanguageIdx].languageId + '.jpg" style="width:48px; height:350px; border:0px none;" />';
  html += '</div>';
  html += '<div id="navigatorSlideImgContainer-' + index + '" class="navigatorSlideImgContainer">';
  if (currentData.DisplayImage != null) {
    //alert(currentData.DisplayImage);
    if (currentData.DisplayImage.indexOf("/") == 0) {
      html += '<img id="navigatorSlideImg-' + index + '" src="ssl/images' + currentData.DisplayImage + '" style="width:48px; height:350px; border:0px none;" />';
    }
    else {
      html += '<img id="navigatorSlideImg-' + index + '" src="' + currentData.DisplayImage + '" style="width:48px; height:350px; border:0px none;" />';
    }
  }
  else {
    html += '<img id="navigatorSlideImg-' + index + '" src="ssl/images/Section' + (index + 1) + '_Img.jpg" style="width:48px; height:350px; border:0px none;" />';
    //html += '<img id="navigatorSlideImg-' + index + '" src="ssl/images/spacer.gif" style="width:48px; height:350px; border:0px none;" />';
  }
  html += '</div>';
  html += '<div id="navigatorSlideContent-' + index + '" class="navigatorSlideContentContainer">';
  html += '<p class="navigatorHeading">';
  html += this.name;
  html += '</p>';
  if (currentData.Details != null) {
    html += '<p class="contentBody">';
    html += currentData.Details;
    html += '</p>';
  }
  html += '</div>';
  $('#navigatorElement').append(html);

  $('#navigatorSlideContent-' + this.index).hide();

  if (this.parent.languagebar.items[this.parent.languagebar.currentLanguageIdx].languageId == 'en') {
    // activate the mouseover event on each slide button
    $('#navigatorSlideBtn-' + index).mouseover(function () {
      var parts = this.id.split('-');
      var idx = new Number(parts[1]);
      pageManager.navigator.hiliteBtn(idx);
    });

    // activate the mouseout event on each slide button
    $('#navigatorSlideBtn-' + index).mouseout(function () {
      var parts = this.id.split('-');
      var idx = new Number(parts[1]);
      pageManager.navigator.unhiliteBtn(idx);
    });
  }

  this.isOpen = false;

  preloadImages('ssl/images/Section' + (index + 1) + '_Btn_over-' + this.parent.languagebar.items[this.parent.languagebar.currentLanguageIdx].languageId + '.jpg');
}

HtmlSlideObject.prototype = {
  open: function (delay) {
    $('#navigatorSlideImgContainer-' + this.index).delay(delay).animate({ width: this.imageWidth }, 1200);
    $('#navigatorSlideImg-' + this.index).delay(delay).animate({ width: this.imageWidth }, 1200);
    $('#navigatorSlide-' + this.index).delay(delay).animate({ left: '-=668px', width: '716px' }, 1200);
    $('#navigatorSlideContent-' + this.index).delay(delay).animate({ width: '375px' }, 1200).show('slow');
    this.isOpen = true;
  },

  close: function (delay) {
    $('#navigatorSlide-' + this.index).delay(delay).animate({ left: '+=668px', width: '48px' }, 1200);
    //$('#navigatorSlide-' + this.index).delay(delay).animate({ left: '+=668px', width: '716px' }, 1200);
    $('#navigatorSlideContent-' + this.index).delay(delay).animate({ width: '0px' }, 1200).hide('fast');
    $('#navigatorSlideImgContainer-' + this.index).delay(delay).animate({ width: '48px' }, 1200);
    $('#navigatorSlideImg-' + this.index).delay(delay).animate({ width: '48px' }, 1200);
    this.isOpen = false;
  },

  hilite: function () {
    $('#navigatorSlideBtnImg-' + this.index)[0].src = 'ssl/images/Section' + (this.index + 1) + '_Btn_over-' + this.parent.languagebar.items[this.parent.languagebar.currentLanguageIdx].languageId + '.jpg';
  },

  unhilite: function () {
    $('#navigatorSlideBtnImg-' + this.index)[0].src = 'ssl/images/Section' + (this.index + 1) + '_Btn_out-' + this.parent.languagebar.items[this.parent.languagebar.currentLanguageIdx].languageId + '.jpg';
  },

  update: function (currentData) {
    this.currentData = currentData;

    // update the slide image
    if (currentData.DisplayImage.indexOf("/") == 0) {
      $('#navigatorSlideImg-' + this.index)[0].src = 'ssl/images' + currentData.DisplayImage;
    }
    else {
      $('#navigatorSlideImg-' + this.index)[0].src = currentData.DisplayImage;
    }

    var html = '<p class="navigatorHeading">';
    html += this.name;
    html += '</p>';
    if (currentData.Details != null) {
      if (currentData.Details.indexOf('<p>') != 0) {
        html += '<p>';
      }
      html += currentData.Details;
      if (currentData.Details.indexOf('<p>') != 0) {
        html += '</p>';
      }
    }

    $('#navigatorSlideContent-' + this.index).empty();
    $(html).prependTo('#navigatorSlideContent-' + this.index);
  }
}


///////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////
/*<remarks>
Name:        HtmlNavigatorObject Class
Method:      constructor
Description: Instantiates a new instance of the navigator object.
Parameters:  parentObject: the parent script object that instantiated this object
</remarks>*/
HtmlNavigatorObject = function (parentObject) {
  this.parent = parentObject;

  // instantiate the content manager associated with this navigator
  this.content = new HtmlContentManagerObject(this);

  // and initialise the required module fields
  this.currentIndex = 0;
  this.previousIndex = 0;
  this.currentSlide = null;
  this.previousSlide = null;
  this.items = new Array();

}

//-----------------------------------------------------------------------------
/*<remarks>
Description: Defines the  methods of the HtmlNavigatorObject Class.
</remarks>*/
HtmlNavigatorObject.prototype = {
  init: function (homepage, sections) {
    // re-initialise the required module fields
    this.currentIndex = 0;
    this.currentSlide = null;
    this.previousSlide = null;
    this.items = new Array();

    // and remove any existing navigator ui elements
    $('#navigatorElement').empty();
    // and ensure that the content pane is also empty
    this.content.clear();

    var slideCount = 0;
    if (homepage != null)
      slideCount += 1;
    if (sections != null) {
      //slideCount += sections.length;
      for (var s = 0; s < sections.length; s++) {
        if (sections[s].ClassName == 'Section') {
          slideCount += 1;
        }
      }
    }
    // calculate the initial X position of the first slide, so that all
    // slides are ranged right in the 956 pixel wide navigator element
    var slideLeft = 956 - (slideCount * 48);

    if (homepage != null) {
      // instantiate a new slide object for the current dataobject
      // and add it to the navigator's slide collection (the items property)
      var idx = this.items.length;
      this.items[idx] = new HtmlSlideObject(this.parent, idx, this.parent.websiteData, homepage, slideLeft);
      // recalculate the initial X position for the next slide
      slideLeft += 48;
    }

    if (sections != null) {
      for (var s = 0; s < sections.length; s++) {
        if (sections[s].ClassName == 'Section') {
          // instantiate a new slide object for the current dataobject
          // and add it to the navigator's slide collection (the items property)
          var idx = this.items.length;
          this.items[idx] = new HtmlSlideObject(this.parent, idx, homepage, sections[s], slideLeft);
          // recalculate the initial X position for the next slide
          slideLeft += 48;
        }
      }
    }

    // activate the click event on each slide button
    $('div[id|=navigatorSlideBtn]').click(function () {
      var parts = this.id.split('-');
      var idx = new Number(parts[1]);
      pageManager.navigator.goToSlide(idx);
    });
    //    $('div[id|=navigatorSlideBtn]');

    // initialise the positioning and sttributes of the various ui elements
    $('div[id|=navigatorElement]').addClass('navigatorElement');
    //    //$('div[id|=navigatorSlide]').addClass('navigatorSlide');
    $('div[id|=navigatorSlideBtn]').addClass('navigatorSlideBtn');
    //    $('div[id|=navigatorSlideImg]').addClass('navigatorSlideImg');

    //        var slideLeft = 956 - (slideCount * 48);
    //        for (var i = 0; i < slideCount; i++) {
    //          // initialise the positioning of each slide in the navigator
    //          $("#navigatorSlide-" + i).offset({ top: 0, left: slideLeft });
    //          slideLeft += 48;
    //        }
    //        $("#navigatorSlide-1").offset({ top: 0, left: (956 - 48) });

    //$('.siteContactPrimary').css('opacity', 0.6);



    //    for (var o = 0; o < sections.length; o++) {
    //      var idx = this.items.length;
    //      this.items[idx] = new HtmlSlideObject(this, idx, sections[o], this.rootElement);
    //    }
    //    this.currentSlide = this.items[0];

    //    this.remoteControl.init(sections);
    //    this.remoteControl.showDropdownMenu();

    //this.start();


    // then, initialise the content for this section
    this.content.init(homepage, sections);

  },

  start: function () {
    // display the base ui element
    $('#navigatorElement').show();

    this.currentIndex = 0;
    this.items[0].open(1500);
  },

  hiliteBtn: function (index) {
    this.items[index].hilite();
  },

  unhiliteBtn: function (index) {
    this.items[index].unhilite();
  },

  goToSlide: function (index) {
    // clear the current menu & content
    this.content.clear();

    // and cancel any pending dataportal request
    if (dataportal.request) {
      dataportal.cancelRequest();
    }

    // retrieve the data required to populate the navigator
    //dataportal.fetchCurrentObject = function (parentClassTypeId,
    //                                          parentId,
    //                                          parentCustomObjectId,
    //                                          classTypeId,
    //                                          className,
    //                                          classId,
    //                                          objId) {
    dataportal.setCallback(createDelegate(this, this.updateSlide));
    dataportal.fetchCurrentObject(this.items[index].ancestorData.ClassTypeId, this.items[index].ancestorData.Id, this.items[index].ancestorData.CustomObjectId, this.items[index].currentData.ClassTypeId, this.items[index].currentData.ClassName, this.items[index].currentData.ClassId, this.items[index].currentData.Id);

    this.previousIndex = this.currentIndex;
    this.currentIndex = index;

    // slide the selected navigator slide into view
    if (this.currentIndex >= 0 && this.currentIndex < this.items.length) {
      var delay = 0;
      if (this.currentIndex < this.previousIndex) {
        // slide right (close)
        for (var i = this.previousIndex; i > this.currentIndex; i -= 1) {
          this.items[i].close(delay);
          delay += 200;
        }
        //this.previousIndex = this.currentIndex;
      }
      else if (this.currentIndex != this.previousIndex) {
        // slide left (open)
        for (var i = this.previousIndex + 1; i <= this.currentIndex; i += 1) {
          this.items[i].open(delay);
          delay += 200;
        }
        //this.previousIndex = this.currentIndex;
      }
    }
  },

  updateSlide: function () {
    var currentObject = arguments[0];
    var childCollection = arguments[1];

    // first, update the current navigator slide
    this.items[this.currentIndex].update(currentObject);

    // then, initialise the content for this section
    this.content.init(currentObject, childCollection);

    //    // slide the selected navigator slide into view
    //    if (this.currentIndex >= 0 && this.currentIndex < this.items.length) {
    //      var delay = 0;
    //      if (this.currentIndex < this.previousIndex) {
    //        // slide right (close)
    //        for (var i = this.previousIndex; i > this.currentIndex; i -= 1) {
    //          this.items[i].close(delay);
    //          delay += 200;
    //        }
    //        //this.previousIndex = this.currentIndex;
    //      }
    //      else if (this.currentIndex != this.previousIndex) {
    //        // slide left (open)
    //        for (var i = this.previousIndex + 1; i <= this.currentIndex; i += 1) {
    //          this.items[i].open(delay);
    //          delay += 200;
    //        }
    //        //this.previousIndex = this.currentIndex;
    //      }
    //    }

  }

}