/* 
 * index.js - runs the scripting for the index page
 */

$j=jQuery.noConflict();

$slideshow = {
    context: false,
    tabs: false,
    tabs_control: false,

    timeout: 4000,      // time before next slide appears (in ms)
    slideSpeed: 2000,   // time it takes to slide in each slide (in ms)
    tabSpeed: 500,      // time it takes to slide in each slide (in ms) when clicking through tabs
    fx: 'fade',   // the slide effect to use

    init: function(viewer, tabs_control) {
        // set the context to help speed up selectors/improve performance
        this.context = $j(viewer);

        // set tabs to current hard coded navigation items
        if (tabs_control)
        {
          this.tabs_control = tabs_control;
          this.tabs = $j(tabs_control + ' li', this.context);

          // remove hard coded navigation items from DOM
          // because they aren't hooked up to jQuery cycle
          this.tabs.remove();
        }

        // prepare slideshow and jQuery cycle tabs
        this.prepareSlideshow();
    },

    prepareSlideshow: function() {
        // initialise the jquery cycle plugin -
        // for information on the options set below go to:
        // http://malsup.com/jquery/cycle/options.html
        $j('ul:first-child', $slideshow.context).cycle({
            fx: $slideshow.fx,
            timeout: $slideshow.timeout,
            speed: $slideshow.slideSpeed,
            fastOnEvent: $slideshow.tabSpeed,
            pager: $slideshow.tabs_control ? $j($slideshow.tabs_control, $slideshow.context) : null,
            pagerAnchorBuilder: $slideshow.tabs_control ? $slideshow.prepareTabs : null,
            before: $slideshow.tabs_control ? $slideshow.activateTab : null,
            pauseOnPagerHover: true,
            pause: true
        });
    },

    prepareTabs: function(i, slide) {
        // return markup from hardcoded tabs for use as jQuery cycle tabs
        // (attaches necessary jQuery cycle events to tabs)
        return $slideshow.tabs.eq(i);
    },

    activateTab: function(currentSlide, nextSlide) {
        // get the active tab
        var activeTab = $j('a[href="#' + nextSlide.id + '"]', $slideshow.context);

        // if there is an active tab
        if(activeTab.length) {
            // remove active styling from all other tabs
            $slideshow.tabs.removeClass('on');

            // add active styling to active button
            activeTab.parent().addClass('on');
        }
    }
};

/*******************************************************************************
 * THUMBNAIL VIEWER
 ******************************************************************************/
$thumbnail_viewer = {
  $context: false,
  $thumbnails: false,
  thumbnail_id: 0,
  max_thumbnail_id: 0,

  init: function(thumbnail_ref)
  {
    // store references
    $context = $j(thumbnail_ref);
    $thumbnails = $j('.thumbnails', $context);

    // setup data
    this.thumbnail_id = 0;
    this.max_thumbnail_id = $thumbnails.children().size() - 1;

    // init handlers
    this.setupHandlers();

    // hide appropriate controls
     // hide left control as we're starting at 0
     $j('#left_control', $context).css('visibility', 'hidden');

     // hide right control if we've only got one item
     if (this.max_thumbnail_id == 0)
     {
       $j('#right_control', $context).css('visibility', 'hidden');
     }
  },

  setupHandlers: function()
  {
    // Setup click handlers - change the image
    $j('#left_control', $context).click(function(event)
    {
      $tv = $thumbnail_viewer;
      //console.log($tv.thumbnail_id);
      if ($tv.thumbnail_id > 0)
      {
        // fade out old
        $j('li:eq(' + $tv.thumbnail_id + ')', $thumbnails).stop().fadeOut('slow');

        // move to next thumbnail id
        $tv.thumbnail_id = --$tv.thumbnail_id < 0 ? 0 : $tv.thumbnail_id;

        // fade in new
        $j('li:eq(' + $tv.thumbnail_id + ')', $thumbnails).stop().fadeIn('slow');

        // hide or display controls
        if (($tv.thumbnail_id == 0) && ($j(this).is(':visible')))
        {
          $j(this).css('visibility', 'hidden');
        }
        else if ($tv.thumbnail_id < $tv.max_thumbnail_id)
        {
          $j('#right_control', $context).css('visibility', 'visible');
        }
      }

      return false;
    });

    $j('#right_control', $context).click(function(event)
    {
      $tv = $thumbnail_viewer;
      if ($tv.thumbnail_id < $tv.max_thumbnail_id)
      {
        // fade out old
        $j('li:eq(' + $thumbnail_viewer.thumbnail_id + ')', $thumbnails).stop().fadeOut('slow');

        // move to next thumbnail id
        $tv.thumbnail_id = ++$tv.thumbnail_id > $tv.max_thumbnail_id ? $tv.max_thumbnail_id : $tv.thumbnail_id;

        // fade in new
        $j('li:eq(' + $thumbnail_viewer.thumbnail_id + ')', $thumbnails).stop().fadeIn('slow');

        // hide or display controls
        if ($tv.thumbnail_id == $tv.max_thumbnail_id)
        {
          $j(this).css('visibility', 'hidden');
        }
        else if ($tv.thumbnail_id > 0)
        {
          $j('#left_control', $context).css('visibility', 'visible');
        }
      }

      return false;
    });

    // display description and item controls
    $j('#thumbnails_viewer .thumbnails li').hover(function() { // hover - over
      // slide up the description
      $j(".portfolio_item_desc", this).slideDown("slow");
      $j(".portfolio_item_control", this).show("fast");
    }
    , function() { // hover - out
      // slide down the description
      $j(".portfolio_item_desc", this).slideUp("slow");
      $j(".portfolio_item_control", this).hide("fast");
    }
    );

  } // end of setupHandlers
};


$j(function() {
    // add a js class to body to show we're using javascript
    $j('body').addClass('js');

    // initialise the slideshow when the DOM is ready
    $slideshow.init('#banner', false);

    // init thumbnail viewer
    $thumbnail_viewer.init('#thumbnails_viewer');

    //$j(".lightbox").lightbox({navbarOnTop: true, fitToScreen: true});
});