/**
 * 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 = 6000;
var gal_ctrl_btn_img = '/i/btn01.gif';
var gal_ctrl_btn_img_o = '/i/btn01_o.gif';
var gal_startbtn = '/i/start_btn.gif';
var gal_stopbtn = '/i/stop_btn.gif';

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

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

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

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

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

  var next_img = current_img.next().length ? ((current_img.next().attr('id') == 'controller')? $jq('#gallery a:first') : current_img.next()) : $jq('#gallery a:first');
  var next_btn = current_btn.next().length ? ((current_btn.next().attr('id') == 'stopstartbtn')? $jq('#controller img:first') : current_btn.next()) : $jq('#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() { $jq(this).attr('src', gal_ctrl_btn_img_o); },
    function() { $jq(this).attr('src', gal_ctrl_btn_img); }
  );

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

function findTarget(ctrlBtnId) {
	try {
		ctrlBtnId += "_target";
		var links = document.getElementsByTagName("a");
		for (var i = 0; i < links.length; i++) {
			if (links[i].id.indexOf(ctrlBtnId) == (links[i].id.length - ctrlBtnId.length))
				return links[i];
		}
		return null;
	} catch (e) {return null;}
}
function slideSelected(ctrlBtnId) {
	var target = findTarget(ctrlBtnId);
	var targetCtrlBtnId = ctrlBtnId;
	if (target != undefined)targetCtrlBtnId = target.id.substring(0,target.id.length-7);//-7 is to remove "_target" at the end of the id;
	
  $jq('#stopstartbtn').removeClass('playon');
  $jq('#stopstartbtn').addClass('playoff');
  $jq('#stopstartbtn').attr('src', gal_startbtn);
  stopSlide();
  
  /* to reset slide image */
  $jq('#gallery a').css({opacity: 0.0});
  $jq('#'+targetCtrlBtnId+'_target').css({opacity: 1.0});
  $jq('#gallery a').removeClass('show');
  $jq('#'+targetCtrlBtnId+'_target').addClass('show');

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

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

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