$(document).ready(function(){
	var moverTemplate = ''+
		'<div class="scpb-pic" style="background-image:url($pic)">'+
		'<a href="$uid-slots-review.htm" class="scpb-read">Review</a>'+
		'<a target="_blank" href="$casino" class="scpb-play">Play Now</a>'+
		'<div class="scpb-name">$name</div>'+
		'<div class="scpb-lnk"><a href="$uid-slots-review.htm"></a></div>'+
		'</div>';
	var currType;
	
	var $tab1 = $('.scph-popular');
	var $tab2 = $('.scph-all');
	
	var counters = {
		popular:0,
		all:0
	}
	var images = {};
	
	if ($.cookie('SlotsPickerPosition')) {
		var savedArr = $.cookie('SlotsPickerPosition').split(',');
		if(savedArr.length == 3){
			for(var i = 0, l = slotsBase.popular.length; i<l; i++){
				if(slotsBase.popular[i].uid == savedArr[0]){
					counters.popular = i;
					break;
				}
			}
			for(var j = 0, l = slotsBase.all.length; j<l; j++){
				if(slotsBase.all[j].uid == savedArr[1]){
					counters.all = j;
					break;
				}
			}
			if(savedArr[2] == 'true'){
				$tab2.addClass('active');
				$tab1.removeClass('active');
			}
		}
	}

	cacheImg('popular');
	cacheImg('all');
	
	function cacheImg(type){
		var indexes = [
			counters[type],
			((counters[type] + 1) > slotsBase[type].length-1)?0:counters[type] + 1,
			((counters[type] - 1) < 0)?slotsBase[type].length-1:counters[type] - 1
		]
		
		for (var i = 0; i < 3; i++){
			var uid = slotsBase[type][indexes[i]].uid
			if(typeof images[uid] == 'undefined'){
				images[uid] = new Image();
				if (slotsBase[type][counters[type]].pic) {
				images[uid].src = 'img/slots-catalog/screens/picker/'+uid+'-1.jpg';
				}
				else {
				images[uid].src = 'img/slots-catalog/screens/picker/noscreen.jpg';
				}
			}
		}
	}
	
	if ($tab1.is('.active')) {
		initMover('popular');
	} else {
		initMover('all');
	}

	function applyTemplate(type){
		var currArr = slotsBase[type];
		var currCont = moverTemplate
			.replace(/\$uid/g, currArr[counters[type]].uid)
			.replace(/\$name/g, currArr[counters[type]].name)
			.replace(/\$casino/g, currArr[counters[type]].casino)
			.replace(/\$pic/g, images[currArr[counters[type]].uid].src)
		return currCont;
	}
	
	function initMover(type){
		currType = type;
		var currCont = applyTemplate(type);
		$('.scpb-current').html(currCont);
	}
	function updateMover(type,increment){
		if((counters[type] + increment) < 0){
			counters[type] = slotsBase[type].length-1;
		} else if((counters[type] + increment) > slotsBase[type].length-1)
		{
			counters[type] = 0;
		} else {
			counters[type] += increment;
		}
		
		images[slotsBase[type][counters[type]].uid] = new Image();
		if (slotsBase[type][counters[type]].pic) {
			images[slotsBase[type][counters[type]].uid].src = 'img/slots-catalog/screens/picker/'+slotsBase[type][counters[type]].uid+'-1.jpg';
		}
		else {
			images[slotsBase[type][counters[type]].uid].src = 'img/slots-catalog/screens/picker/noscreen.jpg';
		}
		
		var currCont = applyTemplate(type);
		$('.scpb-next').html(currCont);
	}
	
	function savePosition(){
		var str = '' + slotsBase['popular'][counters['popular']].uid + ',' + slotsBase['all'][counters['all']].uid + ',' + $tab2.is('.active');
		//console.log(str)
		$.cookie('SlotsPickerPosition',str, { expires: 30 })
	}
	
	
	$tab1.click(function(){
		if(!$tab1.is('.active')){
			$tab1.addClass('active');
			$tab2.removeClass('active');
			initMover('popular');
			savePosition();
			//console.log('tab1 active');
		}
	})
	$tab2.click(function(){
		if(!$tab2.is('.active')){
			$tab2.addClass('active');
			$tab1.removeClass('active');
			initMover('all');
			savePosition();
			//console.log('tab2 active');
		}
	})

	
	var $arrLeft = $('.scpb-arr-left');
	var $arrRight = $('.scpb-arr-right');
	var $moverCont = $('.scpb-mover-cont');
	
	$arrRight.click(function(){
		var $currFrame = $('.scpb-current');
		var $nextFrame = $('.scpb-next');
		
		$arrLeft.hide();
		$arrRight.hide();
		
		updateMover(currType,1);
		$nextFrame.css({'left':737, opacity:0.2});
		
		$currFrame.animate({opacity:0.2},500)
		$nextFrame.animate({opacity:1},500)
		
		$moverCont.animate(
			{left:-737},
			1000,
			function(){
				$moverCont.css('left',-369);
				$nextFrame.css('left',369);
				$currFrame.css('left',0);
				$arrLeft.show();
				$arrRight.show();
				$currFrame.removeClass('scpb-current').addClass('scpb-next');
				$nextFrame.removeClass('scpb-next').addClass('scpb-current');
				savePosition();
			}
		);
	});
	$arrLeft.click(function(){
		var $currFrame = $('.scpb-current');
		var $nextFrame = $('.scpb-next');
		
		$arrLeft.hide();
		$arrRight.hide();

		
		updateMover(currType,-1);
		$nextFrame.css({'left':0, opacity:0.2});
		
		$currFrame.animate({opacity:0.2},500)
		$nextFrame.animate({opacity:1},500)
		
		$moverCont.animate(
			{left:0},
			1000,
			function(){
				$moverCont.css('left',-369);
				$nextFrame.css('left',369);
				$currFrame.css('left',0);
				$arrLeft.show();
				$arrRight.show();
				$currFrame.removeClass('scpb-current').addClass('scpb-next');
				$nextFrame.removeClass('scpb-next').addClass('scpb-current');
				savePosition();
			}
		);
	});
})