/**
 * Rotating Image Gallery with Control Buttons
 * Date: 10/02/2009
 * Test with jQuery 1.3.2. on FF 2/3, IE 6/7/8, Opera 9.5/6, Safari 3, Chrome 1 on WinXP.
 *
 * @Author  Brient Oh
 *
 */

var galIntervalId;
var galIntervalSpeed = 3000;
var gal_ctrl_btn_img = '/images/sweepstakes/btn01.gif';
var gal_ctrl_btn_img_o = '/images/sweepstakes/btn01_o.gif';
var gal_startbtn = '/images/sweepstakes/start_btn.gif';
var gal_stopbtn = '/images/sweepstakes/stop_btn.gif';

$(document).ready(function() {
  ctrlBtnInit()
  slideShow();
  $('#controller img.ctrlbtn').click( function() {
    slideSelected($(this).attr('id'))
  });
  $('#stopstartbtn').click(stopstart);
});

function ctrlBtnInit() {
  $('#controller img').css({cursor: 'pointer'});
  $('#controller img.ctrlbtn').hover(
    function() { $(this).attr('src', gal_ctrl_btn_img_o); },
    function() { $(this).attr('src', gal_ctrl_btn_img); }
  );
}

function slideShow() {
  // Set the opacity of all images to 0
  $('#gallery a').css({opacity: 0.0});
  // Get the first image and display it (set it to full opacity)
  $('#gallery a:first').css({opacity: 1.0});

  $('#controller img.ctrlbtn').attr('src',  gal_ctrl_btn_img);
  $('#controller img:first').attr('src', gal_ctrl_btn_img_o);
  $('#controller img:first').hover(
    function() { $(this).attr('src', gal_ctrl_btn_img_o); },
    function() { $(this).attr('src', gal_ctrl_btn_img_o); }
  );

  galIntervalId = setInterval('gallery()', galIntervalSpeed);
}

function gallery() {
  var current_img = $('#gallery a.show').length ? $('#gallery a.show') : $('#gallery a:first');
  var current_btn = $('#controller img.selected').length ? $('#controller img.selected') : $('#controller img:first');

  var next_img = current_img.next().length ? ((current_img.next().attr('id') == 'controller')? $('#gallery a:first') : current_img.next()) : $('#gallery a:first');
  var next_btn = current_btn.next().length ? ((current_btn.next().attr('id') == 'stopstartbtn')? $('#controller img:first') : current_btn.next()) : $('#controller img:first');

  /* Set the fade in effect for the next image, show class has higher z-index */
  next_img.css({opacity: 0.0}).addClass('show').animate({opacity:1.0}, 1000);
  /* Hide current_img image */
  current_img.animate({opacity: 0.0}, 1000).removeClass('show');

  current_btn.attr('src', gal_ctrl_btn_img);
  current_btn.removeClass('selected');
  current_btn.hover(
    function() { $(this).attr('src', gal_ctrl_btn_img_o); },
    function() { $(this).attr('src', gal_ctrl_btn_img); }
  );

  next_btn.attr('src', gal_ctrl_btn_img_o);
  next_btn.addClass('selected');
  next_btn.hover(
    function() { $(this).attr('src', gal_ctrl_btn_img_o); },
    function() { $(this).attr('src', gal_ctrl_btn_img_o); }
  );
}

function slideSelected(ctrlBtnId) {
  $('#stopstartbtn').removeClass('playon');
  $('#stopstartbtn').addClass('playoff');
  $('#stopstartbtn').attr('src', gal_startbtn);
  stopSlide();
  
  /* to reset slide image */
  $('#gallery a').css({opacity: 0.0});
  $('#'+ctrlBtnId+'_target').css({opacity: 1.0});
  $('#gallery a').removeClass('show');
  $('#'+ctrlBtnId+'_target').addClass('show');

  /* to reset control buttons */
  $('#controller img.ctrlbtn').removeClass('selected');
  $('#'+ctrlBtnId).addClass('selected');
  ctrlBtnInit();
  $('#controller img.ctrlbtn').attr('src',  gal_ctrl_btn_img);
  $('#'+ctrlBtnId).attr('src',  gal_ctrl_btn_img_o);
  $('#'+ctrlBtnId).hover(
    function() { $(this).attr('src', gal_ctrl_btn_img_o); },
    function() { $(this).attr('src', gal_ctrl_btn_img_o); }
  );
}

function stopstart() {
  if($(this).attr('class') == 'playoff') {
    $(this).removeClass('playoff');
    $(this).addClass('playon');
    $(this).attr('src', gal_stopbtn);
    galIntervalId = setInterval('gallery()', galIntervalSpeed);
  } else {
    $(this).removeClass('playon');
    $(this).addClass('playoff');
    $(this).attr('src', gal_startbtn);
    stopSlide();
  }
}

function stopSlide() {
  if (galIntervalId != null) clearInterval(galIntervalId);
}