$(document).ready(function() {
	var dropDowns = $("div.subMenu");
	var menuItems = $("ul#menu li");
	var liCar = $("li#carBox");
	var carBox = $("li#carBox div.subMenu");
	var carListAll = carBox.find("ul.subNav li a");
	var carList = carBox.find("ul.subNav li a.carLink");
	var notCarList = carBox.find("ul.subNav li a[class!=carLink]");
	var carBoxList = carBox.find("ul.subNav li");
	var wrapper = $("div#ajaxWrap");
	
	var carBoxWidth = 750;
	var dropDownWidth = 170;
	var showCar = 0;
	

	$("input.calendarPopupDatePicker").datepicker({
		dateFormat : 'dd/mm/yy',
		maxDate : '+6m',
		minDate : '0'
	});
	
	menuItems.hover(function() {
		$(this).find("div.subMenu").show();
		if( $(this).attr("id").toString() == "carBox" ) {
			wrapper.hide();
			carBox.width(dropDownWidth);
			removeBorders();
		};
	}, function() {
		$(this).find("div.subMenu").hide();
	});
	
	carList.hover(function() {
		loadCar($(this));
	}, function() {
		
	});
	
	carBox.hover(function() {
		if (showCar > 0) {
			wrapper.show();
		};
	}, function() {
		carBox.width(dropDownWidth);
		removeBorders();
		showCar = 0;
	});
	
	notCarList.hover(function(){
		wrapper.hide();
		carBox.width(dropDownWidth);
		removeBorders();
		showCar = 0;
	});

	var doBorders = function() {
	   carListAll.css({borderRight: "1px solid #CCC"});  
	};
	
	var removeBorders = function() {
		carListAll.css({borderRight: "0 none"});
		wrapper.hide();
	};
	
	var loadCar = function(target) {
		carBox.width(carBoxWidth);
		var args = target.attr("href").split("?id=");
		if (args[1] != showCar) {
			$.ajax({
				url: 'includes/viewcar.asp?id=' + args[1],
				before: function() {
					wrapper.hide();
				},
				success: function(data) {
					doBorders();
					target.css({borderRight: "0 none"});
					wrapper.html(data);
					// wrapper.css({ display: "block", opacity: 0 }).animate( { "opacity": 1 }, 500);
					wrapper.show();
				},
				error: function() {
					carBox.width(dropDownWidth);
					removeBorders();
				},
				cache: true
			});
		};
	};
	
	/* HOME PAGE */
	var currImage = 0;
	var maxImages = 3; //maximum index (3 = 4 images)
	var images = $("div#splashImage img");
	var selectors = $("ul#selector li a");
	var container = $("div#splash");
	var menus = $("img.splashMenu");
	var ready = true;
	var timeoutLength = 5200;
	var animationTime = 300;
	
	$(images[currImage]).show();
	$(menus[currImage]).show();
	$(selectors[maxImages - currImage]).addClass("current"); // selector order is inverted
	
	selectors.click(function() {
		// console.log("click: " + ready);
		if (ready) {
			ready = false;
			
			clearTimeout(timer);
			var toID = $(this).attr("id").split("_")[1] - 1;
			if (toID != currImage) {
				var backgroundImg = $(images[toID]).attr("rel");
				container.hide();
				container.css( { backgroundImage : "url("+backgroundImg+")" });
				container.show();
				selectors.removeClass("current");
				$(this).addClass("current");
				$(menus).fadeOut();
				$(images[currImage]).fadeOut(animationTime, function() {
					$(images[toID]).fadeIn(animationTime, function() {
						menus.hide();
						$(menus[toID]).fadeIn(function() {
							ready = true;
							
							timer = setTimeout( nextSlide , timeoutLength);
						});
					});
					currImage = toID;
				});
			}
		}
		return false;
	});
	
	var nextSlide = function() {

		clearTimeout(timer);
		var imageTo = currImage + 1;
		if (imageTo > maxImages) {
			imageTo = 0;
		}
		var backgroundImg = $(images[imageTo]).attr("rel");
		container.hide();
		container.css( { backgroundImage : "url("+backgroundImg+")" });
		container.show();
		selectors.removeClass("current");
		$(selectors[maxImages - imageTo]).addClass("current");
		$(menus).fadeOut();
		$(images[currImage]).fadeOut(animationTime, function() {
			$(images[imageTo]).fadeIn(animationTime, function() {
				menus.hide();
				$(menus[imageTo]).fadeIn(function() {
					timer = setTimeout( nextSlide , timeoutLength);
					ready = true;
				});
			});
		});
		currImage = imageTo;
	};
	
	var timer = setTimeout( nextSlide , timeoutLength);
	
	var carGallery =  $("div#car_gallery");
	var galleryOn = false;
	
	carGallery.hide();
	
	$("div#tilesTop a").click(function() {
		if (galleryOn) {
			carGallery.animate({ opacity: 0, top: 536, height: 0 }, 500, function() {
				carGallery.hide();
				carGallery.stop().clearQueue();
				galleryOn = false;
			});
		} else {
			carGallery.css({ opacity: 0, top: 536, height: 0 });
			carGallery.animate({ opacity: 1, top: 122, height: 414 }, 700, function() {
				carGallery.stop().clearQueue();
				galleryOn = true;
			});
		}
		return false;
	});
});