var countries = [];
var features = [];
var activeFeatures = new Array(2);
var popupVisible;
var gap = 0;
var moving = 0;
var animating = false;
var mouseOnArrow = false;
var actionToExecute;

$(document).ready(function(){
	initFeatures();
	initCountries();
});

function initCountries(){
	$('form#countries input').hide();
	$('form#countries').find('select').each(function(){
		$(this).change(function(){
			$('form#countries input').trigger('click');
		});
	});
}

//********* FEATURE SLIDER ***********//

function initFeatures(){
	//read data of features
	//make object
	//store in array
	var counter = 0;

	$('div.feature').each(function(){
		features[counter] = new Feature(this,counter);
		if(counter<2){
			activeFeatures[counter] = counter;
		}
		counter++;
	});
	var temp = $('div.feature').width();
	//console.log(temp);

	$('div#features').width(counter*$('div.feature').width()+'px');
	initArrows();
}

function Feature(obj,id){

	this.me = $(obj);
	this.container = $($(obj));
	this.id = id;
	this.url = $(obj).children().attr('href');
	this.html = '<div class="feature">'+$(obj).html()+'</div>';
	var url = this.url;
	var id = this.id;
	this.container.hover(function(){
		
		if(!animating){
			var tempArray = [];

			if(id != activeFeatures[0] && id != activeFeatures[1]){
				
				//locate active in features[]
				//check if the position of the clicked one comes before or after the actives in features
				for(var i=0;i<features.length;i++){
				
					if(features[i].id == activeFeatures[0] || features[i].id == activeFeatures[1]){
						
						tempArray.push(i);
					}
					
					else if(features[i].id == id){
						
						var nextActive = id;
						var nextActivePos = i;
						
					}
				}
				
				if(nextActivePos < tempArray[0]){
					rollover('left');
									
					
				}if(nextActivePos > tempArray[1]){
					rollover('right');
					
				}
			}
		}
	},function(){
		rollout();
	});
	
	
	this.container.click(function(me){
		me.preventDefault();
		if(!animating){
	
			var tempArray = [];
			//console.log($(this).html());
			//console.log(id);
			//console.log(activeFeatures[0]);
			//console.log(activeFeatures[1]);
			if(id == activeFeatures[0] || id == activeFeatures[1]){
				document.location.href = 'http://www.artrabbit.com/'+url;
			}else{
				//locate active in features[]
				//check if the position of the clicked one comes before or after the actives in features
				for(var i=0;i<features.length;i++){
				
					if(features[i].id == activeFeatures[0] || features[i].id == activeFeatures[1]){
						
						tempArray.push(i);
					}
					
					else if(features[i].id == id){
						
						var nextActive = id;
						var nextActivePos = i;
						
					}
				}
				
				
				if(nextActivePos < tempArray[0]){
					moveRight(nextActive);
				}if(nextActivePos > tempArray[1]){
					moveLeft(nextActive);
				}
			}
		}
		
		return this;
	});
	return false;
}




function rollover(direction){
	$('#hphover img#'+direction).show();
}

function rollout(){
	if(!mouseOnArrow){
		$('#hphover img').hide();
	}
}

function initArrows(){

	$('#features').before('<div id="hphover" class="clearfix"><img id="left" class="fl" src="/layout/img/spacer.gif" width="51" height="250" alt="move left" /><img id="right" class="fr" src="/layout/img/spacer.gif" width="51" height="250" alt="move right" /></div>');

	$('#hphover img').css({display:'none'});
	$('#hphover img').hover(
		function(){
			$(this).show();
			mouseOnArrow = true;
		},function(){
			mouseOnArrow = false;
	});
	$('#hphover img').click(function(){
		if(!animating){
			var dir = $(this).attr('id');

			if(dir == 'left'){
				//move right
				//get the feature before the first active
				for(var i=0;i<features.length;i++){
				
					if(features[i].id == activeFeatures[0]){
						//my active is:
						var next = features[i-1].id;
					}	
				}
				moveRight(next);

			}else{
				//move left
				for(var i=0;i<features.length;i++){
				
					if(features[i].id == activeFeatures[1]){
						//my active is:
						var next = features[i+1].id;
					}
				}
				moveLeft(next);
			}
		}
	});
}

function moveLeft(f){
	animating = true;
	moving++;
	//first and second time i don't want to change the order of my features
	if(moving == 1){

		gap -= 141;
		
		$('#features').animate({marginLeft:gap},500,function(){
			
			var temp1 = activeFeatures.shift();
			activeFeatures.push(f);
			animating = false;
			
		});	
	}else if(moving == 2){
	
		gap -= 320;
		$('#features').animate({marginLeft:gap},500,function(){
		
			var temp1 = activeFeatures.shift();
			activeFeatures.push(f);
			animating = false;
			
		});	

	}else{
		
			
		//move the first to the last
		var temp1 = activeFeatures.shift();
		activeFeatures.push(f);
	
		
		var ml = $('#features').css('marginLeft');
		
		var temp = ml.split('px');
		
		ml = (temp[0]*1)+320;
		gap += 320;
	
		var counter = 0;
		
		$('#features').find('.feature').each(function(){
			
			if(counter == 0){
	
				
				$('#features').css({marginLeft:ml+'px'});
				$(this).remove();
				
			}
			counter++;
		});
		
		var temp = features.shift();		
		var id = temp.id;
		var html = temp.html;
		$('#features').append(html);
	
		counter = 0;
		$('#features').find('.feature').each(function(){
		
			if(counter == features.length){
			
				features.push(new Feature(this,id));
			
			}
			counter++;
		});

		gap -= 320;
	
		$('#features').animate({marginLeft:gap},500,function(){
			animating = false;

		});
	}
	
}

function moveRight(f){

	//move the last to the first
	animating = true;
	
	var temp1 = activeFeatures.pop();
	activeFeatures.unshift(f);

	var ml = $('#features').css('marginLeft');
	
	var temp = ml.split('px');
	ml = (temp[0]*1)-320;
	gap -= 320;
	var counter = 0;
	

	
	$('#features').find('.feature').each(function(){
		
		if(counter == features.length - 1){

			$(this).remove();
			$('#features').css({marginLeft:ml+'px'});

			
		}
		counter++;
	});
	
	var temp = features.pop();
	
	
	var id = temp.id;
	var html = temp.html;
	$('#features').prepend(html);

	counter = 0;
	$('#features').find('.feature').each(function(){
	
		if(counter == 0){

			features.unshift(new Feature(this,id));
		
		}
		counter++;
	});
	
	gap += 320;
	$('#features').animate({marginLeft:gap},500,function(){
		animating = false;
	});

}


/*function debug(s){
	console.log('----------- '+s+' -----------')
	for(var i=0;i<features.length;i++){
		console.log(features[i].id);
	}
	for(var i=0;i<activeFeatures.length;i++){
		console.log("---"+activeFeatures[i]);
	}
}*/