//Holds the NAME of the current elements.
var imageColor = '';
var imageSize = '';
var imageRotation = 0;

//Holds the REFERENCE to the current elements.
var actualColor = '';
var actualRotation = '';
var actualSize = '';

//Holds the REFERENCE to the last element to remove the formating from it.
var lastColor = '';	
var lastRotation = '';
var lastSize = '';

//The first elements to set a default article.
var firstColor = '';
var firstSize = '';
var data = new Array();

var size = 0;
var lastImage = 0;

var borderStyleActive = '1px solid #000000';
var borderStyleStandard = '1px solid #ffffff';
var link = 'index.php';
var postBody = '';

//Updates the view if size/rotation/color is selcted. Sets the new image and the borders of the selected elements.
function updateImage() {

	//Set borders.
	setBorders();

	//Display the rotation div.
	$('attribute_rotation').style.display = 'inline';

	//Hide any current images.
	hiddeImages();

	//Display the new image.
	$('imageContainer').innerHTML = $(data[imageColor][imageSize][1][imageRotation]).innerHTML;

	//Displac the article infobox.
	$('article_number').innerHTML = data[imageColor][imageSize][2];
	$('article_price').innerHTML = data[imageColor][imageSize][3];
	$('color_name').innerHTML = data[imageColor][imageSize][4];
	$('article_info').style.display = 'block';
}

//Updates the view if a number or next/previous has been clicked.
showImage = function(image) {
	//Hide any current images.
	hiddeImages();

	//If user clicked next image button.
	if (image == 'next') {
		image = lastImage + 1;
	}

	//If user clicked previous image button.
	if (image == 'previous') {
		image = lastImage - 1;
	}

	//If the first image is beeing displayed, hidde the prvious button.
	if (image == 0) {
		$('aprevious').style.display = 'none';
		$('previous').style.display = 'block';
	} else {
		$('aprevious').style.display = 'block';
		$('previous').style.display = 'none';
	}

	//If there are more then one image, hide the next button. If there is only one image, there is no next button.
	if (imagesCount > 1) {
		//If the last image is beeing displayed, hidde the next button.
		if (image + 1 == imagesCount) {
			$('anext').style.display = 'none';
			$('next').style.display = 'block';
		} else {
			$('anext').style.display = 'block';
			$('next').style.display = 'none';
		}
	}

	document.getElementById(image).style.display = 'block';
	document.getElementById('aitem' + image).style.display = 'block';
	document.getElementById('item' + image).style.display = 'none';

	lastImage = image;
}

//Hide all the images.
hiddeImages = function() {
	for (i = 0; i < imagesCount; i++) {
		document.getElementById(i).style.display = 'none';
		document.getElementById('aitem' + i).style.display = 'none';
		document.getElementById('item' + i).style.display = 'block';
	}
	$('imageContainer').innerHTML = "";
}

//Invoked if the user selected a color.
setColor = function(color, pObj) {

	//Set the image color.
	imageColor = color;
	//Set the image element.
	actualColor = pObj;

	//If last color is empty, its the first time the user clicked it. Needed to set the parent object as the last one.
	if (lastColor == '') {
		lastColor = pObj;
	}

	//Update images and borders.
	updateImage();

	//For next turn, parent object is the last object.
	lastColor = pObj;

	//Check if the send link (add to basket) should be displayed.
	showSendLink();
}

//See setColor()
setRotation = function(rotation, pObj) {

	imageRotation = rotation - 1;
	actualRotation = pObj;

	updateImage();

	lastRotation = pObj;
}

//Set borders of the selected elements and remove it from the old ones.
setBorders = function() {

	//If a color is already choosen, hidde border of the last color and set it for the new one.
	//If no color is set, set the border for the first element in the list.
	if (actualColor == '') {
		actualColor = document.getElementById('color_list_element');
	}
	if (lastColor != '') {
		lastColor.style.border = borderStyleStandard;
	} else {
		imageColor = firstColor;
		lastColor = actualColor;
	}
	actualColor.style.border = borderStyleActive;

	//Same as for color above.
	if (lastRotation != '') {
		lastRotation.style.border = borderStyleStandard;
	} else {
		actualRotation = document.getElementById('rotation_list_element');
		lastRotation = actualRotation;
	}
	if (actualRotation == '') {
		actualRotation = document.getElementById('rotation_list_element');
	}
	actualRotation.style.border = borderStyleActive;

	//Same as for color and rotation above.
	if (actualSize == '') {
		actualSize = document.getElementById('size_list_element');
	}
	if (lastSize != '') {
		lastSize.style.border = borderStyleStandard;
	} else {
		//actualSize = document.getElementById('size_list_element');
		lastSize = actualSize;
		imageSize = firstSize;
	}
	actualSize.style.border = borderStyleActive;
}

//Almoste the same as setColor()
setSize = function(size, pObj) {
	//Remove spaces from the size.
	imageSize = size.split(" ").join("");

	actualSize = pObj;

	if (lastSize == '') {
		lastSize = pObj;
	}

	updateImage();

	lastSize = pObj;

	showSendLink();
}

//Show the send link (add to basket) div.
showSendLink = function () {
	var letterValue;

	if ($('letter')) {
		$('letter').value = $('letter').value.toUpperCase();
		letterValue = $('letter').value;
		var letterContent = $('letter').value;
		var letter = letterContent.search(/[A-Z0-9]{1}/);
	} else {
		letter = 0;
		letterValue = '';
	}

	if (imageSize != '' && imageColor != '' && letter == 0) {
		id = data[imageColor][imageSize][0];

		$('send_link').style.display = 'block';
		postBody = 'id=3640&L=0&tx_commerce_pi1[addArticle]=1&tx_commerce_pi1[artAddUid][' + id + '][price_id]=' + id + '&tx_commerce_pi1[artAddUid][' + id + '][count]=1&tx_commerce_pi1[artAddUid][' + id + '][letter]=' + letterValue;
	} else {
		
		$('send_link').style.display = 'none';
	}
}

//If the user clicked on the add to basket link.
addToBasket = function () {

	//Add product to basket.
	var opt = {
		// Use POST
		method: 'post',
		// Send this lovely data
		postBody: postBody,
		// Handle 404
		on404: function(t) {
			alert('Error 404: location "' + t.statusText + '" was not found.');
		},
		onSuccess: function(t) {
			//alert(t.responseText);
		},
		// Handle other errors
		onFailure: function(t) {
			alert('Error ' + t.status + ' -- ' + t.statusText);
		}
	}

//alert('send request!');
	new Ajax.Request(link, opt);

	$('added_to_basket').style.display = 'block';

}

//For the merchants chooser. Gets the merchants from the server.
getMerchants = function(canton) {

	//Get the merchants near the selected canton.
	var opt = {
		// Use POST
		method: 'post',
		// Send this lovely data
		postBody: 'id=3639&L=0&no_cache=1&tx_commercehooks_pi1[userCanton]=' + canton,
		// Handle 404
		on404: function(t) {
			alert('Error 404: location "' + t.statusText + '" was not found.');
		},
		onSuccess: function(t) {
			$('merchant_select').innerHTML = t.responseText;
			$('spinner').style.display = 'none';
		},
		// Handle other errors
		onFailure: function(t) {
			alert('Error ' + t.status + ' -- ' + t.statusText);
		}
	}

	new Ajax.Request(link, opt);
	$('spinner').style.display = 'block';
}

showAll = function() {
	$('others').style.display = 'block';
	$('display_others').style.display = 'none';
}

Event.observe(window, "load", function() {
	//If the product only has one article, preselect it.
	if (articlesCount == 1) {
		setSize(firstSize, $('size_list_element'));	
	}
});