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

HtmlContentMenuItemObject = function (parentObject, index, ancestorData, currentData) {
  this.parent = parentObject;
  this.index = index;
  
  this.name = '';
  if (currentData != null) {
    this.id = currentData.Id;
    this.name = currentData.Name;
    this.ancestorData = ancestorData;
    this.currentData = currentData;
  }

  var row = $('#menu')[0].insertRow(-1);
  var cell = row.insertCell(-1);
  cell.id = 'menuItem-' + index;
  cell.innerHTML = '<p><a hidefocus="true" href="javascript:void(0);">' + this.name + '</a></p>';

  if (currentData != null) {
    // activate the click event on each menu item
    $(cell).click(function () {
      var parts = this.id.split('-');
      var idx = new Number(parts[1]);
      pageManager.navigator.content.goToItem(idx);
    });
  }

  this.isOpen = false;
}

HtmlContentMenuItemObject.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);
    this.isOpen = true;
  },

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

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

    var html = '<p class="contentHeading">';
    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:        HtmlContentMenuObject Class
Method:      constructor
Description: Instantiates a new instance of the menu object.
Parameters:  parentObject: the parent script object that instantiated this object
</remarks>*/
HtmlContentMenuObject = function (parentObject) {
  this.parent = parentObject;

}

//-----------------------------------------------------------------------------
/*<remarks>
Description: Defines the methods of the HtmlContentMenuObject Class.
</remarks>*/
HtmlContentMenuObject.prototype = {
  init: function (homepage, sections) {
    var menuItemCount = 0;
  
  }

}




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

  this.isLightboxOpen = false;

  // load the lightbox object array
  this.lightboxCollection = {
    Image0: {
      Name: "Tour1",
      Description: "Reception at Contraceptive Services",
      Details: "",
      Source: "tour1.jpg"
    },
    Image1: {
      Name: "Tour2",
      Description: "One of the waiting rooms at Contraceptive Services",
      Details: "",
      Source: "tour2.jpg"
    },
    Image2: {
      Name: "Tour3",
      Description: "Contraceptive Services provides calm, comfortable counselling rooms",
      Details: "",
      Source: "tour3.jpg"
    },
    Image3: {
      Name: "Tour4",
      Description: "All patients receive caring, non-judgmental counselling",
      Details: "",
      Source: "tour4.jpg"
    },
    Image4: {
      Name: "Tour5",
      Description: "Further counselling rooms also used for after care recovery",
      Details: "",
      Source: "tour5.jpg"
    },
    Image5: {
      Name: "Tour6",
      Description: "One of our professional consulting rooms",
      Details: "",
      Source: "tour6.jpg"
    },
    Image6: {
      Name: "Tour7",
      Description: "The fully equipped recovery ward",
      Details: "",
      Source: "tour7.jpg"
    },
    Image7: {
      Name: "Tour8",
      Description: "Another of our comfortable waiting rooms",
      Details: "",
      Source: "tour8.jpg"
    }//,
//        Image8: {
//          Name: "Tour9",
//          Description: "Our private hospital standard operating theatre",
//          Details: "",
//          Source: "tour9.jpg"
//        }
  }

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

  // instantiate the menu object
  var html = '<div id="menuContainer">';
  html += '<table id="menu" class="menu" style="display:none;">';
  html += '</table>';
  html += '</div>';
  $('#displayElement').append(html);
  // ...and the menu ajax-loader icon
  var html = '<div id="menuAjaxLoader">';
  html += '<img src="ssl/images/ajax-loader1.gif" style="width:16px; height:16px; border:0px none;" />';
  html += '</div>';
  $('#menuContainer').append(html);
  $('#menuAjaxLoader').hide();

  // instantiate the content object
  var html = '<div id="contentContainer" class="contentContainer">';
  html += '</div>';
  $('#displayElement').append(html);
  // ...and the content ajax-loader icon
  var html = '<div id="contentAjaxLoader">';
  html += '<img src="ssl/images/ajax-loader1.gif" style="width:16px; height:16px; border:0px none;" />';
  html += '</div>';
  $('#contentContainer').append(html);
  $('#contentAjaxLoader').hide();

  // instantiate the sidebar object
  var html = '<div id="sidebarContainer">';

  html += '<p>';
  html += '<div class="wco-sidebar-lightbox">';
  html += '<div class="wco-lightbox-instructions">Click an image to open the slideshow viewer...</div>';
  html += '<div class="wco-lightbox-container">';

  // and build and instantiate the lightbox object
  html += '<table cellspacing="10" cellpadding="0" style="position:absolute; left:20px;">';
  var t = 0;
  $.each(this.lightboxCollection, function (k, v) {
    if (t == 0 || t == 4 || t == 8 || t == 12) {
      html += '<tr>';
    }

    var img = new Image();
    var key = k;
    img.src = 'ssl/images/' + v.Source;
    html += '<td class="wco-lightbox-slide">';
    html += '<img id="thumbnail-' + t + '" class="wco-lightbox-thumbnail" src="' + img.src + '" title="Click to open in slideshow viewer" /';
    html += '</td>';

    if (t == 3 || t == 7 || t == 11) {
      html += '</tr>';
    }

    t++;
  });

  // ensure that the trailing row close element is appended
  if (html.lastIndexOf('</tr>') != (html.length - 5)) {
    html += '</tr>';
  }
  html += '</table>';

  html += '</div>';
  html += '</div>';

  html += '<div class="wco-sidebar-section">';
  html += '<div class="wco-sidebar-title">';
  html += 'Tour the clinic';
  html += '</div>';
  html += '<div class="wco-sidebar-button wco-state-default"><span id="btn-lightbox" class="wco-icon"></span></div>';
  html += '</div>';
  html += '</p>';

  html += '</div>';
  $('#displayElement').append(html);

  $('.wco-sidebar-button').hover(
    function () { $(this).addClass('wco-state-hover'); },
    function () { $(this).removeClass('wco-state-hover'); }
  );

  $('.wco-sidebar-button').mousedown(function () {
    $(this).addClass('wco-state-highlight');
  });

  $('.wco-sidebar-button').mouseup(function () {
    $(this).removeClass('wco-state-highlight');
  });

  //  $('.wco-state-default').toggle(
  //    function () {
  //      pageManager.navigator.content.openLightbox();
  //    },
  //    function () {
  //      pageManager.navigator.content.closeLightbox();
  //    }
  //  );
  $('.wco-sidebar-button').click(
    function (e) {
      // first, stop the click event from propagating below the lightbox otherwise the lightbox will close by default
      if (!e) var e = window.event;
      e.cancelBubble = true;
      if (e.stopPropagation) e.stopPropagation();

      // toggle the lightbox open and closed
      if (pageManager.navigator.content.isLightboxOpen) {
        pageManager.navigator.content.closeLightbox();
      }
      else {
        pageManager.navigator.content.openLightbox();
      }
    }
  );
  // also, stop any clicks from propagating below the lightbox container
  $('.wco-sidebar-lightbox').click(
    function (e) {
      if (!e) var e = window.event;
      e.cancelBubble = true;
      if (e.stopPropagation) e.stopPropagation();
    }
  );

  // and activate the click event on any of the lightbox thumbnails to open the slideshow
  this.slideshow = null;
  $('.wco-lightbox-thumbnail').click(
    function (e) {
      // first, stop the click event from propagating below the lightbox otherwise the lightbox will close by default
      if (!e) var e = window.event;
      e.cancelBubble = true;
      if (e.stopPropagation) e.stopPropagation();

      // then retrieve the index of the clicked thumbnail, which will be the starting point for the slideshow
      var index = $(this)[0].id.split('-')[1];
      // and launch the slideshow
      pageManager.navigator.content.openSlideshow(index);
    }
  );

  // initialise the required module fields
  this.items = new Array();
}

//-----------------------------------------------------------------------------
/*<remarks>
Description: Defines the methods of the HtmlContentManagerObject Class.
</remarks>*/
HtmlContentManagerObject.prototype = {
  openLightbox: function () {
    // open the lightbox
    $( '.wco-sidebar-lightbox' ).animate( { left: '-734px', top: '15px', width: '900px', height: '250px' }, 600 ).show( 600 );
    // show the lightbox content
    $( '.wco-lightbox-container' ).show( 600 );
    // show the lightbox instructions
    $( '.wco-lightbox-instructions' ).show( 600 );
    // and toggle the button to the close icon (-)
    $( '#btn-lightbox' ).addClass( 'wco-icon2' );
    // and set the isOpen flag
    this.isLightboxOpen = true;
  },

  closeLightbox: function () {
    if ( this.isLightboxOpen ) {
      // hide the lightbox content
      $( '.wco-lightbox-container' ).hide( 600 );
      // hide the lightbox instructions
      $( '.wco-lightbox-instructions' ).hide( 600 );
      // close the lightbox
      $( '.wco-sidebar-lightbox' ).animate( { left: '161px', top: '20px', width: '0px', height: '0px' }, 600 ).hide( 600 );
      // and toggle the button back to the open icon (+)
      $( '#btn-lightbox' ).removeClass( 'wco-icon2' );
      // and set the isOpen flag
      this.isLightboxOpen = false;
    }
  },

  openSlideshow: function ( index ) {
    this.slideshow = new HtmlSlideshowObject( this, null, this.lightboxCollection );
    this.slideshow.init( index );
  },

  closeSlideshow: function () {
    $( '#slideshow-slide' ).hide( 400 );
    $( '#slideshow-viewer' ).animate( { top: this.slideshow.startTop + 'px', left: this.slideshow.startLeft + 'px', width: '0px', height: '0px' }, 600, '', function () { pageManager.navigator.content.completeCloseSlideshow(); } );
  },

  completeCloseSlideshow: function () {
    $( 'div' ).remove( '#slideshow-viewer' );
    $( 'div' ).remove( '#slideshow-overlay' );
    this.slideshow = null;
  },

  init: function ( currentSection, children ) {
    // remove any existing menu items
    //this.clear();

    // and then add any Question items to the menu
    for ( var m = 0; m < children.length; m++ ) {
      if ( children[m].ClassName == 'Question' ) {
        var idx = this.items.length;
        this.items[idx] = new HtmlContentMenuItemObject( this, idx, currentSection, children[m] );
      }
    }
    // plus add a final blank menu item in order to display a bottom border keyline
    if ( this.items.length > 0 ) {
      var idx = this.items.length;
      this.items[idx] = new HtmlContentMenuItemObject( this, idx, null, null );
    }

    // populate the sidebar
    if ( currentSection.AdvertisementImage != null ) {
      if ( currentSection.AdvertisementImage != '' ) {
        var h = 311;
        switch ( this.parent.currentIndex.toString() ) {
          case '0':
            h = 418;
            break;
          default:
            h = 311;
            break;
        }
        var html = '<p>';
        //alert(currentSection.AdvertisementImage);
        if ( currentSection.AdvertisementImage.indexOf( "/" ) == 0 ) {
          html += '<img src="ssl/images' + currentSection.AdvertisementImage + '" style="width:161px; height:' + h + 'px; border:0px none;" />';
        }
        else {
          html += '<img src="' + currentSection.AdvertisementImage + '" style="width:161px; height:' + h + 'px; border:0px none;" />';
        }
        html += '</p>';

        //        // ONLY DISPLAY THE SIDEBAR ADVERT IF THE CURRENT USER IS IN THE "US Wholesaler" Role
        //        if (this.parent.parent.securityManager) {
        //          if (this.parent.parent.securityManager.isInRole('US Wholesaler'))
        //          {
        //            $('#sidebarContainer').append(html);
        //          }
        //        }
        $( '#sidebarContainer' ).append( html );
      }
    }

    // hide the menu ajax-loader icon
    $( '#menuAjaxLoader' ).hide();
    // now that the content is loaded, display the element containing the content
    // and, if there is more than one item in the menu list, then also display the menu
    if ( this.items.length > 2 ) {
      // check for items length greater than two allows for the final blank menu item
      $( '#menu' ).show();
      // and set the relevant class on the content container
      $( '#contentContainer' ).removeClass().addClass( 'contentContainer' );
    }
    else {
      // set the relevant class on the content container
      $( '#contentContainer' ).removeClass().addClass( 'contentContainerWide' );
    }
    $( '#displayElement' ).show();

    // and, if there is content to show, automatically select the first item
    if ( this.items.length > 0 ) {
      this.goToItem( 0 );
    }

  },

  goToItem: function ( index ) {
    // first, remove any existing content
    this.clearContent();

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

    //dataportal.fetchCurrentObject = function (parentClassTypeId,
    //                                          parentId,
    //                                          parentCustomObjectId,
    //                                          classTypeId,
    //                                          className,
    //                                          classId,
    //                                          objId) {
    dataportal.setCallback( createDelegate( this, this.updateContent ) );
    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 );

  },

  updateContent: function () {
    var currentData = arguments[0];
    //var childCollection = arguments[1];

    // before displaying the new content, hide the content ajax-loader icon
    $( '#contentAjaxLoader' ).hide();

    // display the new content
    var html = '<p class="contentHeading">';
    html += currentData.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>';
      }
    }
    //$(html).prependTo('#contentContainer');
    $( '#contentContainer' ).append( html );

  },

  clear: function () {
    this.clearMenu();
    this.clearContent();

    // show the menu ajax-loader icon
    $( '#menuAjaxLoader' ).show();
    // and initialise the content container to the default class
    $( '#contentContainer' ).removeClass().addClass( 'contentContainer' );
  },

  clearMenu: function () {
    var menu = $( '#menu' )[0];
    while ( menu.rows.length > 0 ) {
      menu.deleteRow( 0 );
    }
    this.items = new Array();
    $( '#menu' ).hide();

    //$('#sidebarContainer').empty();
    var sidebar = $( '#sidebarContainer' )[0];
    while ( sidebar.childNodes.length > 4 ) {
      sidebar.removeChild( sidebar.childNodes[4] );
    }

  },

  clearContent: function () {
    //$('#contentContainer').empty();
    var content = $( '#contentContainer' )[0];
    while ( content.childNodes.length > 1 ) {
      content.removeChild( content.childNodes[1] );
    }

    // and display the content ajax-loader icon
    $( '#contentAjaxLoader' ).show();
  }

}