/* 	jQuery Image Flipper 2.5
*	Brookes Stephens 
*	Dependant upon: jquery.cycle.all.min.js / jquery-ui-1.7.2.custom.min.js/ jquery-1.4..js
*	1/22/2010
*/

var flipTotal;
var imgUrls = ['http://assets.hmwallace.com/EmployeeFlipper/sally.jpg', 
                'http://assets.hmwallace.com/EmployeeFlipper/jack.jpg', 
                'http://assets.hmwallace.com/EmployeeFlipper/josh.jpg', 
                'http://assets.hmwallace.com/EmployeeFlipper/bryan.jpg', 
                'http://assets.hmwallace.com/EmployeeFlipper/sybil.jpg',  
                'http://assets.hmwallace.com/EmployeeFlipper/mary.jpg'];
                
var tabThumb = ['http://assets.hmwallace.com/EmployeeFlipper/sally_thumb.jpg', 
                'http://assets.hmwallace.com/EmployeeFlipper/jack_thumb.jpg', 
                'http://assets.hmwallace.com/EmployeeFlipper/josh_thumb.jpg', 
                'http://assets.hmwallace.com/EmployeeFlipper/bryan_thumb.jpg', 
                'http://assets.hmwallace.com/EmployeeFlipper/sybil_thumb.jpg', 
                'http://assets.hmwallace.com/EmployeeFlipper/mary_thumb.jpg'];

var setIndex;


function flipBuilder(items) {
	
	var flipTabHTML = '<div class="tabs"><div id="fControls"><input type="button" id="empPrev" value="prev" /><input type="button" id="empRand" value="random" /><input type="button" id="empNext" value="next" /></div><ul class="pageTabs">';
	var flipImgHTML = '<div class="main"><div class="mainImgs">' ;
	
	
	for (i=0; i < items; ++i) {
			n =  i + 1;
     	flipTabHTML +=  '<li class="fTab"><a href="javascript:void(0);"><img src="' + tabThumb[i] +  '" alt="National Builder Supply"/></a></li>';
			flipImgHTML  += '<a class="fImg" href="javascript: void(0); return false"><img src="http://assets.hmwallace.com/images/loading.gif" alt="National Home Supply" /></a>';
			//console.log(imgUrls[i]);

	}	
	
	flipImgHTML  += '</div><div class="playPause"></div></div>';
	
	var flipperHTML = flipImgHTML + flipTabHTML;
	return flipperHTML;
	
}


$(document).ready(function(){
	
	flipTotal = imgUrls.length;
	var flipHTML = flipBuilder(flipTotal);	
	var startImg = Math.floor(Math.random()*flipTotal);

	$('#empFlipper').html(flipHTML).hover(function(){   //
		 pauseIt();
		$('.mainImgs').cycle('pause');			
	}, 
	function(){
		$('.mainImgs').cycle('resume');
		playIt();
	});	
	
	function initFlip() {
		 $('.mainImgs')
		.cycle({
			fx: 'scrollRight',
			delay: 2000,
			dropShadow: false,
			autoArrows: false,
			startingSlide: startImg,
			prev: '#empPrev',
			next: '#empNext',
			speed: 600,
			timeout: 8000,
			pause: 0,
			before: function () {			
				var cycle_index = $(this).index();				
				var cycle_next = cycle_index + 1;
				(cycle_next >= flipTotal )?  cycle_next = 0 : cycle_next = cycle_next;


				$('.main a.fImg').eq(cycle_next).children('img').attr('src', imgUrls[cycle_next]); 
				//$('.main').css('background-image', imgUrls[cycle_index]);
				flipActive(cycle_index);		
			}						 
		});
	}
	initFlip();

	
	function playIt() {$('.playPause').css({'background-image': 'url("http://assets.hmwallace.com/EmployeeFlipper/play.gif")'}).fadeOut(1000);}
	function pauseIt() {$('.playPause').css({'background-image': 'url("http://assets.hmwallace.com/EmployeeFlipper/pause.gif")'}).fadeIn(500);}
	
	/*** rewrite the index ***/
	function newIndex (tab) {		
		setIndex= $('li.fTab:eq(' + tab + ')');
	}

	
	//FLIP CURRENT ACTIVE TAB
	function flipActive (selTab){
		//Set the active index
		newIndex(selTab);
		
		//Check for a src being there already
		var urllen = $('.main a.fImg').eq(selTab).children('img').attr('src').length;

		
		$(selTab).addClass('active');		//.children('img').attr({src: imgUrls[index]});
		 if (urllen == "" || urllen == null) {
			$('.main a.fImg').eq(selTab).children('img').attr({src: imgUrls[selTab]});
		 }
		
		$('.main a.fImg').eq(selTab).children('img').attr('src', imgUrls[selTab]); 
		
		$('.pageTabs li.active').removeClass('active');			
		$('.pageTabs li').eq(selTab).addClass('active');
	}
	
	function flipImg (imgID) {
			var fwd = flipTotal + 1;
			var bkwd = flipTotal;
		
			$(".mainImgs a").css({'z-index': bkwd, 'left': '-500px', 'display': 'none'}).removeClass('activeSlide');
			$(".mainImgs a").eq(imgID).css({'z-index': fwd, 'left': '0px', 'display': 'block'}).addClass('activeSlide');

	}
	
	//CLICK TAB
	$('.pageTabs li').click(function() {	
									 
		var img_index = $(this).index();
		
		for (i=0; i<flipTotal; ++i) {
			$('.mainImgs a').eq(i).children("img").attr({src: imgUrls[i] });	
		}

		flipActive(img_index);
		flipImg(img_index);
		$('.mainImgs').cycle('stop');
		startImg = img_index;
		initFlip();
	});
	
	//RANDOMIZE BUTTON
	$('#empRand').click(function(){
		$('.mainImgs').cycle('stop');
		startImg = Math.floor(Math.random()*flipTotal);
		initFlip();
	});



});