var SaveAndCompare = Class.create({

	initialize: function(){
		this.maxCars = 3;
		this.cookieName = "saveAndCompare";

		this.boxes = $$('.fav');


		this.savedCars = new Array();
	},

	/*
		Add a car to the save and compare list
	*/
	addCar: function(id, imageURL, title){
		//Store a cookie containing the cars in the
		//compare list, then add the image to the
		//save and compare thumbnails, by AJAX requesting
		//it.

		if(this.savedCars.length < this.maxCars){

			//Check that this car is not already saved.
			var duplicated = false;
			this.savedCars.each(function(car){
				if(id == car.id){
					duplicated = true;
				}
			});
			if(!duplicated){
				//Store the car in savedCars Array
				this.savedCars[this.savedCars.length] = {
					'id': id,
					'imageURL': imageURL,
					'title': title
				};

				//Store the entire savedCars array
				//in our cookie
				document.cookie = this.cookieName + "=" + this.savedCars.toJSON() + "; path=/";

				//Update the thumbnails.
				this.updateThumbs();

				return true;
			}else{
				alert("This car is already in your compare list.");
				return false;
			}

		}else{
			alert("You may only save " + this.maxCars + " cars for comparison." );
		}

		return false;
	},

	/*
		Loads each of the thumbnails for the cars,
		TODO: Stop cars that are already in the list fromreloading
	*/
	updateThumbs: function(){

		this.boxes.each(function(box){
			box.update();
		})

		this.savedCars.each(function(car, i){

			this.boxes[i].update('<img src="'+car.imageURL+'" title="'+car.title+'" style="height: 40px; width: 54px;" />');
		}, this);
	},

	/*
	 * Loads the saved cars array from the cookie,
	 * Only do this once per page load, after this, the array
	 * should be in sync anyway
	 */
	populateSavedCars: function(){
		var carJSON = document.cookie.substring(
			document.cookie.indexOf(this.cookieName + "="),(
			document.cookie.indexOf(";",
			document.cookie.indexOf(this.cookieName + "="))!= -1)?
			document.cookie.indexOf(";",document.cookie.indexOf(this.cookieName + "=")):
			document.cookie.length).substring((this.cookieName + "=").length);

			try{
				cars = carJSON.evalJSON();
				cars.each(function(car){
					this.addCar(car.id, car.imageURL, car.title);
				}, this);
			}catch(e){

			}

	},

	/**
	 * Moves to the compare page, this page can run using PHP and
	 * Cookies
	 */
	callComparePage: function(){

	},

	clearCars: function(){
		this.savedCars.clear();
		//Remove the savedCars cookie, by making it expire some time ago
		document.cookie = this.cookieName+"=; expires=Thu, 01-Jan-70 00:00:01 GMT;path=/";
		this.updateThumbs();
	},

	removeCar: function(id){
		if(confirm('Are you sure you would like to remove this car?')){
			var delCar = false;
			this.savedCars.each(function(car){
				if(car.id == id){
					delCar = car;
				}
			});

			if(delCar){
				this.savedCars = this.savedCars.without(delCar)
				this.updateThumbs();
				document.cookie = this.cookieName + "=" + this.savedCars.toJSON() + "; path=/";
			}
			//Look for the car in the list and remove it
			//But only if we are in save and compare mode!
			if(compare && $('car_' + id)){
				$('car_' + id).remove();
			}
		}
	},

	isSavedCar: function(id) {
		for (var i = 0; i < this.savedCars.length; i++) {
			if (this.savedCars[i].id == id) {
				return true;
			}
		}
		return false;
	},

	setButtonStates: function() {
		this.savedCars.each(function(car){
			var butt = $('saveCompare_'+ car.id);
			if (butt == undefined) {
				return;
			}
			butt.scAction = 'remove';
			butt.src = baseHref + "images/layup/btnRemoveSaveCompare.png";
			butt.setStyle({width: 131, height: 33});
		});
	}
});

var save
Event.observe(window, "load", function(){

	save = new SaveAndCompare();
	save.populateSavedCars();
	save.setButtonStates();

})


function saveCar(id, imageURL, title){
	if(save.addCar(id, imageURL, title)){
		alert("The car has been added to your compare list");
	};
	return false;
}

function clearCars(){
	save.clearCars();
	return false;
}

function removeCar(id){
	save.removeCar(id);
	return false;
}