var number_of_pictures = 12; 
var current_image = 1;

function nextImage()
{
	var nID = current_image + 1;
	if(nID > number_of_pictures)
		nID = 1;
	
	changeImage(nID);
}

function prevImage()
{
	var nID = current_image - 1;
	if(nID == 0)
		nID = number_of_pictures;
	
	changeImage(nID);
}

function changeImage(nID)
{
	hideBorders();
	$('display_picture_img').innerHTML = "<img src=\"images/prod/pics/" + nID + ".jpg\" id=\"big_picture\" class=\"" + nID + "\" usemap=\"#imageMap\" />";
	$('display_picture').fade(1);
	$('big_picture').fade('hide');
	$('big_picture').fade(1);
	//this.setStyle("border","2px solid #70b852");
	var p = document.getElementById('image_'+nID);
	p.setStyle("border","3px solid #70b852");
	current_image = nID;
}

function show_pictures () {
	var while_pictures = 1;
	while(while_pictures <= number_of_pictures) {
		var new_image = new Element('img', {
			'src': 'images/prod/thumbs/' + while_pictures + '.jpg',
			'id': 'image_' + while_pictures,
			'style': 'display:inline-block;margin-bottom:35px;width:83px;height:49px',
			'events': {
				'click': function(){
					hideBorders();
					$('display_picture_img').innerHTML = "<img src=\"" + this.src.replace('images/prod/thumbs/', 'images/prod/pics/') + "\" id=\"big_picture\" class=\"" + this.id + "\" usemap=\"#imageMap\" />";
					$('display_picture').fade(1);
					$('big_picture').fade('hide');
					$('big_picture').fade(1);
					this.setStyle("border","3px solid #70b852");
					setCurrentImage(this.id);
				}
			}
		});
		
		if(while_pictures == 1)
		{
			new_image.setStyle("border","3px solid #70b852");
		}
		else
		{
			new_image.setStyle("border","3px solid #fff");
		}

		new_image.inject($('inside'));
		var preload_image = new Element('img', {
			'src': 'images/prod/pics/' + while_pictures + '.jpg',
			'class': 'hide'
		});
		preload_image.inject($('container'));
		while_pictures++;
	}

}

function setCurrentImage(imageID)
{

	var id = imageID.substr(6);
	//alert(current_image + " :: " + id);
	current_image = parseInt(id);
}

function hideBorders ()
{
	var inside = document.getElementById("inside");
	
	for ( var i = 1; i <= number_of_pictures; i++)
	{
		var img = document.getElementById('image_' + i);
		img.setStyle("border","3px solid #fff");
	}
}

window.addEvent('domready', function() {	
	show_pictures();
	$('big_picture').fade('hide');
	$('big_picture').fade(1);
});