var countries = [];
var features = [];
var activeFeature = 0;
var popupVisible;
var gap = 0;
var animation_in_progress = 0;

$(document).ready(function(){

	initFeatures();
	moveScreens(1);

});

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


function initFeatures(){
	// inititate the controls
	$('div#features_right').click(function(event) {
		moveScreens(1);
	});
	$('div#features_left').click(function(event) {
		moveScreens(-1);
	});

	
	var counter = 0;
	$('div.feature').each(function(){
		features[counter] = new Feature(this,counter);
		counter++;
	});

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




function Feature(obj,id){
	this.me = $(obj);
	this.container = $($(obj));
	this.id = id;
	
	this.html = '<div class="feature">'+$(obj).html()+'</div>';

	var url = this.url;
	var id = this.id;
	
	return this;
}

var moving = 0;

function moveScreens(direction) {
	// we need to determine where we are
	// and then call the correct funtion
	if(direction < 0 ) {
		if(activeFeature + direction > 0 ) {
			moveRight(activeFeature + direction);
		} else {
			moveRight(features.length);
		}
	} else {
		if(activeFeature + direction > features.length) {
			moveLeft(0);
		} else {
			moveLeft(activeFeature + direction);
		}
	}
}
	



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

		if(animation_in_progress == 0) {
			animation_in_progress = 1;
			$('#features').animate({marginLeft:gap},750,function(){activeFeature = f;animation_in_progress=0;});
		}
	}else if(moving == 2){
	
		gap -= 335;
		if(animation_in_progress == 0) {
			animation_in_progress = 1;
			$('#features').animate({marginLeft:gap},750,function(){
				activeFeature = f;
				animation_in_progress=0;
			});
		}
	}else{
		activeFeature = f;

		var ml = $('#features').css('marginLeft');
		var temp = ml.split('px');

			
			//ml = ml.substr('px');
			
			ml = (temp[0]*1)+335;
			gap += 335;
			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);
			setupZoom();
			counter = 0;
			$('#features').find('.feature').each(function(){
			
				if(counter == features.length){
					features.push(new Feature(this,id));
				}
				counter++;
			});

		gap -= 335;
		if(animation_in_progress == 0) {
			animation_in_progress = 1;	
			$('#features').animate({marginLeft:gap},750,function(){animation_in_progress=0;});
		}
	}
	
}

function moveRight(f){
	activeFeature = f;

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

		
		$('#features').find('.feature').each(function(){
			
			if(counter == features.length - 1){
				$(this).remove();
				$('#features').css({marginLeft:ml+'px'});
				//console.log('doneit');
				
			}
			counter++;
		});
		
		var temp = features.pop();
		
		
		var id = temp.id;
		var html = temp.html;
		$('#features').prepend(html);
		setupZoom();
		counter = 0;
		$('#features').find('.feature').each(function(){
		
			if(counter == 0){
				features.unshift(new Feature(this,id));
			
			}
			counter++;
		});
		gap += 335;
		if(animation_in_progress == 0) {
			animation_in_progress = 1;	
			$('#features').animate({marginLeft:gap},750,function(){animation_in_progress=0;});
		}
}