$(document).ready(function(){
	$("#container").html($("#container").html()+'<div id="debug"></div>');
	$("#focus").html($("#focus").html()+'<div id="wheels1" class="hidden"><img src="" alt="" title="" width="541" height="87" id="wheel1" /></div>');
	$("#mondeo").html($("#mondeo").html()+'<div id="wheels2" class="hidden mw1"></div>');
	$("#focus").click(function(){toggle();});
	$("#btnFocus").bind("click",function(){toggle();});
	get_model();
	
	//preload wheel images
	for(var i=0;i<wheel1.length;i++){
		wheel1_img[i] = new Image;
		wheel1_img[i].src = wheel1[i];
	}
	for(var i=0;i<wheel1.length;i++){
		wheel1_img[i].onload = checkLoad;
		if(jQuery.browser.msie)
			checkLoad();
	}
	for(var i=0;i<wheel2.length;i++){
		wheel2_img[i] = new Image;
		wheel2_img[i].src = wheel2[i];
	}
	for(var i=0;i<wheel2.length;i++){
		wheel2_img[i].onload = checkLoad2;
		if(jQuery.browser.msie)
			checkLoad2();
	}
});

var animate_car_switching = true;
var state = true;

var timer1 = null;
var car1_target_left;
var car1_direction;
var current_wheel1 = 0;
var wheel1 = new Array('/img/car1/1.gif','/img/car1/2.gif','/img/car1/3.gif','/img/car1/4.gif','/img/car1/5.gif');
var wheel1_img = new Array();

var timer2 = null;
var car2_step = 0;
var car2_direction;
var current_wheel2 = 0;
var wheel2 = new Array('/img/car2/1.gif','/img/car2/2.gif','/img/car2/3.gif','/img/car2/4.gif','/img/car2/5.gif');
var wheel2_img = new Array();

function toggle(){
	set_model();
	
	var carIn = (state) ? '#focus' : '#mondeo';
	var carOut = (state) ? '#mondeo' : '#focus';
	var btnIn = (state) ? '#btnFocus' : '#btnMondeo';
	var btnOut = (state) ? '#btnMondeo' : '#btnFocus';

	$(carIn).css({cursor:"default"});
	$(carOut).css({cursor:"pointer"});
	$("#focus").css({marginLeft:"0"});	
	var an_k = 1.3;
	jQuery.easing.def = "easeOutQuad";
	if(state){
		if(animate_car_switching){
			var left = eval(Math.floor(document.body.scrollWidth/2)-382)+'px';
			car1_target_left = left;			
			
			var l = Number(car1_target_left.substr(0,car1_target_left.length-2));
			var x = $("#focus").css("left");
			x = Number(x.substr(0,x.length-2));
			var d = Math.abs(Math.floor(l-x))*an_k;
			
			//mondeo right
			$("#mondeo").animate({left:"100%",marginLeft:"-100px"}, 0.66*d,function(){stop_wheel2();});
			$("#mondeo").animate({width:"100px"}, 100);
			//mondeo wheels right
			car2_direction = 'right';						
			$("#wheels2").removeClass('hidden');
			$("#wheels2").fadeIn('slow');
			animate_wheel2();
						
			//focus left
			$("#focus").animate({left:left}, d);
			//focus wheels left
			car1_direction = 'left';						
			$("#wheels1").removeClass('hidden');
			$("#wheels1").fadeIn('slow');
			animate_wheel1();
		}
		else{	
			//no animation
			$("#mondeo").css({left:"100%",marginLeft:"-100px"});
			$("#mondeo").css({width:"100px"});
			
			var left = eval(Math.floor(document.body.scrollWidth/2)-382)+'px';
			$("#focus").css({left:left});						
		}
		
		//detach/attach events
		$("#focus").unbind("click");
		$("#mondeo").bind("click",function(){toggle();});
		$("#btnFocus").unbind("click");
		$("#btnMondeo").bind("click",function(){toggle();});
	}
	else{
		if(animate_car_switching){					
			car1_target_left = "-630px";
			
			var l = Number(car1_target_left.substr(0,car1_target_left.length-2));
			var x = $("#focus").css("left");
			x = Number(x.substr(0,x.length-2));
			var d = Math.abs(Math.floor(l-x))*an_k;
					
			//mondeo left			
			$("#mondeo").animate({width:"780px"}, 100);
			$("#mondeo").animate({left:"50%",marginLeft:"-390px"}, d,function(){stop_wheel2();});			
			//mondeo wheels left
			car2_direction = 'left';						
			$("#wheels2").removeClass('hidden');
			$("#wheels2").fadeIn('slow');
			animate_wheel2();
			
			//focus right
			$("#focus").animate({left:"-630px"}, 0.66*d);
			//focus wheels right			
			car1_direction = 'right';						
			$("#wheels1").removeClass('hidden');
			$("#wheels1").fadeIn('slow');
			animate_wheel1();
		}
		else{
			//no animation
			$("#mondeo").css({width:"780px"});
			$("#mondeo").css({left:"50%",marginLeft:"-390px"});
			$("#focus").css({left:"-630px"});
		}

		//detach/attach events
		$("#mondeo").unbind("click");
		$("#focus").bind("click",function(){toggle();});		
		$("#btnMondeo").unbind("click");
		$("#btnFocus").bind("click",function(){toggle();});
	}				
	if(animate_car_switching){
		//text animation
		$(btnIn+" span").css({color:"#000000",cursor:"text",borderBottom:"none"});
		$(btnOut+" span").css({color:"#103198",cursor:"pointer",borderBottom:"1px dashed #103198"});
		$(btnIn).parent().animate({width:"55%",fontSize:"90%"}, d-200);
		$(btnOut).parent().animate({width:"26%",fontSize:"70%"}, d-200);
		$(btnIn).animate({fontSize:"120%"}, d-200);
		$(btnOut).animate({fontSize:"100%"}, d-200);
	}
	else{
		//text switching without animation
		$(btnIn+" span").css({color:"#000000",cursor:"text",borderBottom:"none"});
		$(btnOut+" span").css({color:"#103198",cursor:"pointer",borderBottom:"1px dashed #103198"});
		$(btnIn).parent().css({width:"55%",fontSize:"90%"});
		$(btnOut).parent().css({width:"26%",fontSize:"70%"});
		$(btnIn).css({fontSize:"120%"});
		$(btnOut).css({fontSize:"100%"});
	}
							
	state = !state;
	animate_car_switching = true;
}
//wheel images preloader
function checkLoad(){
	var complete = true;
	for(var i=0;i<wheel1.length;i++){
		if(!wheel1_img[i].complete)
			complete = false;
	}
	if(complete){
		return
	}			
	timer_id = setTimeout("checkLoad()",10);
}
function checkLoad2(){
	var complete = true;
	for(var i=0;i<wheel2.length;i++){
		if(!wheel2_img[i].complete)
			complete = false;
	}
	if(complete){
		return
	}			
	timer_id2 = setTimeout("checkLoad2()",10);
}
//focus wheel animation
function animate_wheel1(){		
	var l = Number(car1_target_left.substr(0,car1_target_left.length-2));
	var x = $("#focus").css("left");
	x = Number(x.substr(0,x.length-2));
	var d = Math.abs(Math.floor(l-x));
	//$("#debug").html($("#debug").html()+" "+d);
	var timeout;
	
	if(d<=0){
		/*$("#wheels1").fadeOut('fast',function(){
			$("#wheels1").addClass('hidden');
		});*/
		timer1 = null;
		return
	}
	else{		
		if(car1_direction=='left'){
			current_wheel1 = (current_wheel1<wheel1.length-1) ? current_wheel1+1 : 0;
			timeout = (Math.abs(d/l)>0.2)?  20 : 40;
		}
		else{
			current_wheel1 = (current_wheel1>1) ? current_wheel1-1 : wheel1.length-1;
			timeout = (Math.abs(d/l)<0.2)? 60 : 30;
		}
		$("#wheel1").attr({src: wheel1_img[current_wheel1].src});
	}	
	timer1 = setTimeout("animate_wheel1()",timeout);
}
function animate_wheel2(){
	var timeout;

	var x = $("#mondeo").css("left");
	x = Number(x.substr(0,x.length-2));
		
	//$("#debug").html($("#debug").html()+" "+car2_step);
	//$("#debug").html($("#debug").html()+" "+x);
		
	if(car2_step<0){
		timer2 = null;
		car2_step = 0;
		return;
	}
	else{
		$("#wheels2").removeClass('mw'+current_wheel2);
		if(car2_direction=='left'){
			current_wheel2 = (current_wheel2<wheel2.length-1) ? current_wheel2+1 : 0;
			timeout = (x>54)?  28 : 60;
		}
		else{
			current_wheel2 = (current_wheel2>1) ? current_wheel2-1 : wheel2.length-1;
			timeout = (car2_step>10)? 40 : 20;
		}
		car2_step++;		
		$("#wheels2").addClass('mw'+current_wheel2);
		timer2 = setTimeout("animate_wheel2()",timeout);
	}			
}
function stop_wheel2(){
	car2_step = -1;
}
function resize(){
	if(!state){
		var left = eval(Math.floor(document.body.scrollWidth/2)-382)+'px';
		$("#focus").animate({left:left}, 100);
	}
}

var http_request = false;

function makeGETRequest(url, parameters, afteraction){
	http_request = false;
	if (window.XMLHttpRequest){
		http_request = new XMLHttpRequest();
			if (http_request.overrideMimeType){
				http_request.overrideMimeType('text/html');
			}
	} 
	else if (window.ActiveXObject){
		try{
			http_request = new ActiveXObject("Msxml2.XMLHTTP");
		} 
        	catch (e){
			try{
				http_request = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e){}
		}
	}	
	if (!http_request) {
		return false;
	} 
	http_request.onreadystatechange=afteraction 
	http_request.open("GET",url+'?'+parameters,true)	
	http_request.send(null)
}

function set_model(){
	var poststr;
	var model = (state)? 'focus' : 'mondeo';
	poststr = 'model='+model;
	makeGETRequest('/car-park/set.php', poststr, onchange_set_model);
}

function onchange_set_model(){
	if (http_request.readyState == 4){
		if (http_request.status == 200){
			result = http_request.responseText;
		} 
	}
}
function get_model(){
	makeGETRequest('/car-park/get.php', '', onchange_get_model);
}

function onchange_get_model(){
	if (http_request.readyState == 4){
		if (http_request.status == 200){
			result = http_request.responseText;
			if(result=='focus'){
				animate_car_switching = false;
				toggle();
			}
		} 
	}
}