var rotator_index    = 0;
var $_ROTATOR_AUTOLOAD = new Array();
var indexes=0;
var rotatorProperty = {"rotatorPath":"/rotator/","flashVideoPlayerJS":"flashPlayer.js","loadFlashVideoPlayer":false};
var debug=0;
var active_category = 0;
var active_slide = 0;
var active_slide_id = -1;

var total_slides=0;
var topSlide = 40000;
var firstChild=true;
var rotator_interval=false;
var skipOne=true;
var clickEnabled=true;



(function( $ ){
	$.fn.rotator = function(callback,slidechange) {
		total_slides = rotatorData.panels.length;
		var j=topSlide;
		var resourceBase = rotatorData.playerConfig.resourceBase;
		
		var width = rotatorData.playerConfig.panelWidth;
		var height = rotatorData.playerConfig.panelHeight;
		
		// creating the categories
		var categoriesHTML = '<div class="left" id="categories"><ul>';
		var slidesContainer = '<div class="rotator-slide-container" style="width:'+width+';height:'+height+';">';
		var rotatorButtons = '<div id="rotator-buttons">';
		for(var i=0; i<rotatorData.categories.length;i++){
			// finding out the CSS for image/video slides
			var category = rotatorData.categories[i];

			// creating the categories list
			categoriesHTML+='<li class="category"><a class="category-link" categoryid="'+category.id+'" id="category-'+category.id+'" href="#">'+category.name+'</a></li>';
			
			rotatorButtons += '<div class="rotatorButtonSet" categoryid="'+category.id+'">';
			
			firstChild=true;
			// Creating all the panels and adding them to div
			for(var k=0; k<rotatorData.panels.length;k++){
				
				// finding out the CSS for image/video slides
				var panel = rotatorData.panels[k];
				
				// we will not add this child to the panel if it is not from the 
				// current category
				if(panel.category!=category.id) continue;
				j--;
				var panelClass='';
				if(panel.type=='video') panelClass=rotatorData.videoClass;
				else if(panel.type=='image') panelClass=rotatorData.imageClass;

				// adding the caption panel
				var captionBar='';
				if(rotatorData.panels[k].slideCaption==true){
					captionBar = '<div class="info-bar">'
					 +'<a class="item-link" href="'+rotatorData.panels[k].link+'">'
					 +rotatorData.panels[k].linkText+'</a>'
					 +'<span class="rotator-title">'+rotatorData.panels[k].title+'<br /></span><span class="rotator-description">'+rotatorData.panels[k].subtitle+'</span>'
					 +'<a href="'+category.link+'" class="rotatorlink"></a>'
					 +'</div>';
				}
				
				// adding the slide in pool
				slidesContainer+=('<div class="slide" panelindex="'+k+'" type="'+panel.type+'" style="'+((panel.type=='flashVideo'||panel.link!='')?'cursor:pointer':'')+';z-index:'+j+';position:absolute;left:0;top:0;width:'+width+'px;height:'+height+'px;background:url('+resourceBase+rotatorData.playerConfig.imageFolder+panel.image+') transparent left top no-repeat" id="panel-'+category.id+'-'+panel.id+'" categoryid="'+category.id+'" panelid="'+panel.id+'">'+captionBar+'</div>');
				
				
				// adding the buttons
				if(rotatorData.playerConfig.thumbnails) // if we have thumbnails, show them
					rotatorButtons += '<a panelid="'+panel.id+'" categoryid="'+category.id+'" class="rotator-button'+((firstChild)?' firstChild':'')+'" href="#"><img panelid="'+panel.id+'" class="rotator-button-image" src="'+resourceBase+rotatorData.playerConfig.imageFolder+'thumbnails/'+panel.image+'"></a>';
				else // else just show bullets
					rotatorButtons += '<a panelid="'+panel.id+'" categoryid="'+category.id+'" class="rotator-button" href="#"><img panelid="'+panel.id+'" class="rotator-button-image" src="'+rotatorProperty.rotatorPath+'images/button-disabled.png"></a>';
				
				firstChild=false;
				
			}
			rotatorButtons += '</div>';
		}
		slidesContainer+='</div>';
		categoriesHTML += '</ul></div>';
		rotatorButtons += '</div>';
		
		var rotator = categoriesHTML
					+'<div class="left" id="rotator">'
					+ rotatorButtons
					+ '<div id="rotator-body">'
					+ '<div id="rotator-mask">'
					+ slidesContainer 
					+ '</div></div>'
					+'</div>';

		// adding the dom tree to the rotator panel
		$(this).append(rotator);
		
		
		// Setting the first slide as startup 
		//activateSlide(0);
		
		/////////////////////////// ACTIONS //////////////////////////////
		// CLICK on categories
		$('a.category-link').click(function(){
			if (active_category != $(this).attr('categoryid'))
			{
				// loading slide
				loadSlide($(this).attr('categoryid'),-1);
				
				// now applying 'active' class
				$('a.category-link').removeClass('active');
				$(this).addClass('active');
				
			}
			return false;
		});

		// CLICK on panels
		$('.slide').click(function(){
			// we do not want to do anything while animation is happening
			if(!clickEnabled) return;
			
			// now performing click action
			var panelid = $(this).attr('panelid');
			var categoryid = $(this).attr('categoryid');
			var id = $(this).attr('id');
			var type = $(this).attr('type');
			var panelindex = $(this).attr('panelindex');
			

			// if this is video panel, play it
			if(type=='flashVideo'){
				// hiding the play button
				$('.playbutton').css('display','none');

				loadVideo($(this));
				$(this).unbind('click');
			}
			// if it is an image with link, just go there
			else if(rotatorData.panels[panelindex].type=='image' && rotatorData.panels[panelindex].link!='')
				window.location.href = rotatorData.panels[panelindex].link;
		});

		// HOVER on video 'play' div
		$('.vlashVideoPlayer').hover(
			function(){
				$(this).addClass('over');
				$(this).removeClass('out');
			},
			function(){
				$(this).addClass('out');
				$(this).removeClass('over');
			}
		);

		/* Homepage: Rotator Button Controls */
		$('a.rotator-button').click(function(){

				if(!clickEnabled) return;
				
				clearInterval(rotator_interval);
				var categoryid = $(this).attr('categoryid');
				var panelid = $(this).attr('panelid');
				loadSlide(categoryid,panelid);
		});
		
		//*
		rotator_interval = setInterval(function(){
			
			if(skipOne) {
				skipOne=false;
				return;
			}
			
			nextSlide(active_slide);
			
		}, rotatorData.playerConfig.slideDelay)
		//*/
		
		$('.rotator-item').css({'width':rotatorData.playerConfig.panelWidth,'height':rotatorData.playerConfig.panelHeight});
		$.getScript(rotatorProperty.rotatorPath+'js/'+rotatorProperty.flashVideoPlayerJS);
		
		// now setting correct state
		var categoryid = $('.slide:first-child').attr('categoryid');
		var panelid =  $('.slide:first-child').attr('panelid');
		rotatorState(categoryid,panelid);
		
		//$( $_ROTATOR_AUTOLOAD[rotator_index] ).trigger('click');
		//$('#categories ul li a:first-child').click();
		// now we are calling our own callback function
		if(typeof callback == 'function'){
			callback.call();
		}

	};
})( jQuery );

function loadSlide(catid,panelid){
	// do something once user clicked and animation is done
	if(!clickEnabled) return;
	
	stopVideos();

	clickEnabled=false;
	rotatorState(catid,panelid);
	
	// don't do anything if we are alredy on that slide
	if(active_slide_id==panelid && active_category==catid)return;
	active_slide_id=panelid;
	active_category=catid;;
	
	// we do not need to rotate anymore
	clearInterval(rotator_interval);
	
	if(panelid<0) panelid = $('.rotatorButtonSet[categoryid='+catid+'] .firstChild').attr('panelid');
	
	
	// now we need to create a clone of the slide that's been requested, 
	// then we will slide it in
	var tempslide = $('#panel-'+catid+'-'+panelid).clone(true);
	
	topSlide++;
	tempslide.attr('id','');
	tempslide.addClass('cloneSlide');
	tempslide.css({'z-index':topSlide,'left':rotatorData.playerConfig.panelWidth});
	$('.rotator-slide-container').prepend(tempslide);

	tempslide.animate({left:0},rotatorData.playerConfig.animationTime,'swing',function(){
		// showing the play button
		$('.playbutton').css('display','block');
	
		// now removing all other slides except this panel
		//$('.cloneSlide[panelid!='+$(this).attr('panelid')+']').remove();
		clickEnabled=true;
	});
	
	
	
	
}

function rotatorState(catid,panelid){
	//if(!clickEnabled) return;

			// now loading right thumbnail bar
			activateElement('.rotatorButtonSet','categoryid',catid);
			
			// activating right category
			activateElement('a.category-link','categoryid',catid);
			
			// activating the right thumbnail panel
			if(active_category!=catid){
				$('.rotatorButtonSet').hide();
				$('.rotatorButtonSet[categoryid="'+catid+'"]').show();
				active_category=catid;
			}
			
			// activating the thumbnail
			activateElement('.rotator-button','panelid',panelid);

}
function nextSlide(){
	if(!clickEnabled) return;
	clickEnabled=false;
			var oldslide=active_slide;
			
			if(active_slide==(total_slides-1)) active_slide=0;
			else active_slide++;

			var button = $('.slide:eq('+active_slide+')');
			catid = button.attr('categoryid');
			panelid = button.attr('panelid');
			
			rotatorState(catid,panelid);
			
			// sliding
			
			/*
			var bg = rotatorData.panels[slideindex].image;
			bg = 'url("'+rotatorData.playerConfig.resourceBase+rotatorData.playerConfig.imageFolder+bg+'")';
			$('.rotator-slide-container').css('background-image',bg);
			*/
			
			button = $('.slide:eq('+oldslide+')');
			catid = button.attr('categoryid');
			panelid = button.attr('panelid');

			//clickEnabled=false;
			button.animate({left:rotatorData.playerConfig.panelWidth},rotatorData.playerConfig.animationTime,'swing',function(){
				clickEnabled=true;
				$(this).css({'z-index':($(this).css('z-index')-total_slides),'left':'0px'});
				stopVideos();
			});

			


}
function activateElement(selector,name,value){
			$(selector).removeClass('active');
			$(selector+'['+name+'='+value+']').addClass('active');
}