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

HtmlSlideshowObject = function (parentObject, parentElement, lightboxCollection) {
  this.parent = parentObject;
  this.lightboxCollection = lightboxCollection;

  this.viewerWidth = 621;
  this.viewerHeight = 410;
  this.viewerTop = 0;
  this.viewerLeft = 0;
  this.startTop = 0;
  this.startLeft = 0;
  this.currentIndex = new Number(0);
  var c = 0;
  $.each(this.lightboxCollection, function (k, v) {
    c++;
  });
  this.slideCount = c;

  this.isAutomatic = true; // toggles the viewer in or out of automatic slideshow mode

  var html = '<div id="slideshow-overlay" class="wco-widget-overlay">';
  html += '';
  html += '';
  html += '';
  html += '</div>';

  $('#bodyElement').append(html);

  // also, stop any clicks from propagating below the slideshow overlay
  $('#slideshow-overlay').click(
    function (e) {
      if (!e) var e = window.event;
      e.cancelBubble = true;
      if (e.stopPropagation) e.stopPropagation();
    }
  );

}

HtmlSlideshowObject.prototype = {
  init: function (firstIndex) {

    // instantiate the slide viewer
    var html = '<div id="slideshow-viewer" class="wco-slideshow-viewer">';
    html += '';
    html += '';
    html += '';
    html += '<div>';
    $('#bodyElement').append(html);

    this.viewerTop = (($(window).height() - this.viewerHeight) / 2) + $(window).scrollTop();
    this.viewerLeft = ($(window).width() - this.viewerWidth) / 2;
    this.startTop = this.viewerTop + (this.viewerHeight / 2);
    this.startLeft = this.viewerLeft + (this.viewerWidth / 2);
    var viewerCss = {
      'top': this.startTop + 'px',
      'left': this.startLeft + 'px'
    };
    $('#slideshow-viewer').css(viewerCss);

    // instantiate the viewer control panel
    var html = '<div id="slideshow-control-panel" class="wco-slideshow-control-panel">';
    html += '<div class="wco-btn-1 wco-btn-default" title="Previous"><span id="btn-previous" class="wco-btn wco-btn-previous"></span></div>';
    html += '<div class="wco-btn-2 wco-btn-default" title="Start/Pause"><span id="btn-startstop" class="wco-btn wco-btn-stopstart"></span></div>';
    html += '<div class="wco-btn-3 wco-btn-default" title="Next"><span id="btn-next" class="wco-btn wco-btn-next"></span></div>';
    html += '<div>';
    $('#slideshow-viewer').append(html); // and append the control panel to the slideshow viewer
    var ctrlTop = this.viewerHeight - 30 - 20;
    var ctrlLeft = (this.viewerWidth - $('#slideshow-control-panel').width()) / 2;
    var controlCss = {
      'top': ctrlTop + 'px',
      'left': ctrlLeft + 'px'
    };
    $('#slideshow-control-panel').css(controlCss);

    // instantiate the slide object with its image and description containers (which will accessed via their IDs in the code that loads and displays each slide)
    var html = '<div id="slideshow-slide" class="wco-slideshow-slide">';
    html += '<img id="slideshow-slide-image" style="border:0px none;" />';
    html += '<div>';
    $('#slideshow-viewer').append(html); // and append the slide object to the slideshow viewer
    var html = '<div id="slideshow-slide-description" class="wco-slideshow-slide-description">';
    html += '';
    html += '<div>';
    $('#slideshow-slide').append(html); // and append the description to the slide object

    // instantiate the slideshow close button
    var html = '<div id="slideshow-closebutton" class="wco-slideshow-closebutton wco-state-default" title="Exit"><span id="btn-exit" class="wco-icon3"><img src="ssl/images/spacer.gif" style="width:22px; height:22px;" /></span></div>';
    $('#slideshow-viewer').append(html); // and append the close button to the slideshow viewer

    $('#slideshow-closebutton').hover(
      function () { $(this).addClass('wco-state-hover'); },
      function () { $(this).removeClass('wco-state-hover'); }
    );

    $('#slideshow-closebutton').mousedown(function () {
      $(this).addClass('wco-state-highlight');
    });

    $('#slideshow-closebutton').mouseup(function () {
      $(this).removeClass('wco-state-highlight');
    });

    // setup the click handler for the control buttons
    $('.wco-btn').click(
      function (event) {
        event.stopPropagation();
        //alert(this.id);
        switch (this.id) {
          case 'btn-previous':
            $('#slideshow-viewer').clearQueue();
            $('#slideshow-slide').clearQueue();
            pageManager.navigator.content.slideshow.isAutomatic = false;
            $('#slideshow-slide').fadeOut('slow', function () { pageManager.navigator.content.slideshow.goprevious(); })
            break;
          case 'btn-next':
            $('#slideshow-viewer').clearQueue();
            $('#slideshow-slide').clearQueue();
            pageManager.navigator.content.slideshow.isAutomatic = false;
            $('#slideshow-slide').fadeOut('slow', function () { pageManager.navigator.content.slideshow.gonext(); })
            break;
          default:
            pageManager.navigator.content.slideshow.startstop();
            break;
        }
        return false;
      }
    );

    // setup the click handler to close the slideshow
    $('#slideshow-viewer').click(
      function () {
        $('#slideshow-slide').clearQueue();
        $('#slideshow-slide').stop();
        pageManager.navigator.content.closeSlideshow();
        //$('#slideshow-viewer').animate({ top: this.startTop + 'px', left: this.startLeft + 'px', width: '0px', height: '0px' }, 600); 
        //$('#slideshow-overlay').delay(900).hide('slow', function () { $('#bodyElement').remove('#slideshow-overlay'); });
      }
    );

    // and animate the viewer open
    $('#slideshow-closebutton').animate({ top: '10px', left: (this.viewerWidth - 40) + 'px' }, 500);
    $('#slideshow-closebutton').delay(500).show(100);
    $('#slideshow-control-panel').delay(500).show(900);
    $('#slideshow-viewer').delay(500).animate({ top: this.viewerTop + 'px', left: this.viewerLeft + 'px', width: this.viewerWidth + 'px', height: this.viewerHeight + 'px' }, 900, 'swing', function () { $('#slideshow-control-panel').fadeIn(); pageManager.navigator.content.slideshow.start(firstIndex); });
  },

  start: function (index) {
    // set the slide index
    this.currentIndex = new Number(index);

    // pre-load the image for this first slide
    var img = new Image();
    $(img).load(function () {
      pageManager.navigator.content.slideshow.displayFirstSlide(this);
    }); // wire up the onload event for this image to continue the display of the slide
    img.src = 'ssl/images/' + this.lightboxCollection['Image' + index].Source;

  },

  displayFirstSlide: function (img) {

    // load the image into the slideshow viewer
    $('#slideshow-slide-image')[0].src = img.src;
    $('#slideshow-slide-image').width(img.width);
    $('#slideshow-slide-image').height(img.height);
    $('#slideshow-slide-description')[0].innerHTML = this.lightboxCollection['Image' + this.currentIndex].Description;
    
    // determine the required dimensions of slideshow viewer to accommodate this slide image
    var viewerWidth = img.width + 40;
    var viewerHeight = img.height + 90 + 22; // the final 22 pixels is to accommodate the close button
    var viewerTop = (($(window).height() - this.viewerHeight) / 2) + $(window).scrollTop();
    var viewerLeft = ($(window).width() - viewerWidth) / 2;
    var ctrlTop = viewerHeight - 30 - 20;
    var ctrlLeft = (viewerWidth - $('#slideshow-control-panel').width()) / 2;
    // and animate the viewer repositioning
    $('#slideshow-control-panel').animate({ top: ctrlTop + 'px', left: ctrlLeft + 'px' }, 450);
    $('#slideshow-closebutton').animate({ top: '10px', left: (viewerWidth - 40) + 'px' }, 450);

    // and initiate the slideshow
    if (this.isAutomatic) {
      $('#slideshow-viewer').animate({ top: viewerTop + 'px', left: viewerLeft + 'px', width: viewerWidth + 'px', height: viewerHeight + 'px' }, 900, 'swing', function () { $('#slideshow-slide').delay(250).fadeIn('slow', function () { $('#slideshow-slide').delay(3000).fadeOut('slow', function () { pageManager.navigator.content.slideshow.gonext(); }); }); });
    }
    else {
      $('#slideshow-viewer').animate({ top: viewerTop + 'px', left: viewerLeft + 'px', width: viewerWidth + 'px', height: viewerHeight + 'px' }, 900, 'swing', function () { $('#slideshow-slide').delay(250).fadeIn('slow') });
    }

  },

  startstop: function () {
    this.isAutomatic = !this.isAutomatic;

    if (this.isAutomatic) {
      $('#slideshow-slide').fadeOut('slow', function () { pageManager.navigator.content.slideshow.gonext(); });
    }
    else {
      $('#slideshow-slide').clearQueue();
      //$('#slideshow-slide').stop();
    }
  },

  gonext: function () {
    // increment the slide index
    this.currentIndex += 1;
    if (this.currentIndex == this.slideCount) {
      this.currentIndex = new Number(0);
    }

    // and pre-load the image for this next slide
    var img = new Image();
    $(img).load(function () {
      pageManager.navigator.content.slideshow.show(this);
    }); // wire up the onload event for this image to continue the display of the slide
    img.src = 'ssl/images/' + this.lightboxCollection['Image' + this.currentIndex].Source;

  },

  goprevious: function () {
    // decrement the slide index
    this.currentIndex -= 1;
    if (this.currentIndex == -1) {
      this.currentIndex = this.slideCount - 1;
    }

    // and pre-load the image for this next slide
    var img = new Image();
    $(img).load(function () {
      pageManager.navigator.content.slideshow.show(this);
    }); // wire up the onload event for this image to continue the display of the slide
    img.src = 'ssl/images/' + this.lightboxCollection['Image' + this.currentIndex].Source;

  },

  show: function (img) {
    
    // load the image into the slideshow viewer
    $('#slideshow-slide-image')[0].src = img.src;
    $('#slideshow-slide-image').width(img.width);
    $('#slideshow-slide-image').height(img.height);
    $('#slideshow-slide-description')[0].innerHTML = this.lightboxCollection['Image' + this.currentIndex].Description;

    // determine the required dimensions of slideshow viewer to accommodate this slide image
    var viewerWidth = img.width + 40;
    var viewerHeight = img.height + 90 + 22; // the final 22 pixels is to accommodate the close button
    var viewerTop = (($(window).height() - this.viewerHeight) / 2) + $(window).scrollTop();
    var viewerLeft = ($(window).width() - viewerWidth) / 2;
    var ctrlTop = viewerHeight - 30 - 20;
    var ctrlLeft = (viewerWidth - $('#slideshow-control-panel').width()) / 2;
    // and animate the viewer repositioning
    $('#slideshow-control-panel').animate({ top: ctrlTop + 'px', left: ctrlLeft + 'px' }, 450);
    $('#slideshow-closebutton').animate({ top: '10px', left: (viewerWidth - 40) + 'px' }, 450);

    // and continue the slideshow - each option first resizes the slideshow viewer, if required, to accommodate a different size image
    if (this.isAutomatic) {
      //$('#slideshow-slide').fadeIn('slow', function () { $('#slideshow-slide').delay(3000).fadeOut('slow', function () { pageManager.navigator.content.slideshow.gonext(); }); });
      $('#slideshow-viewer').animate({ top: viewerTop + 'px', left: viewerLeft + 'px', width: viewerWidth + 'px', height: viewerHeight + 'px' }, 450, 'swing', function () { $('#slideshow-slide').fadeIn('slow', function () { $('#slideshow-slide').delay(3000).fadeOut('slow', function () { pageManager.navigator.content.slideshow.gonext(); }); }) });
    }
    else {
      //$('#slideshow-slide').fadeIn('slow');
      $('#slideshow-viewer').animate({ top: viewerTop + 'px', left: viewerLeft + 'px', width: viewerWidth + 'px', height: viewerHeight + 'px' }, 450, 'swing', function () { $('#slideshow-slide').fadeIn('slow') });
    }

  }

}