var photoId = 0;
var photoDir = "Image/Services/Services";

/*--------------------------------------------------------------------------*/

var Slideshow = Class.create();

Slideshow.prototype = {
	initialize: function(photoId, photoImage, photoWidth, photoHeight)
	{
		this.photoImage = photoImage;
		this.photoWidth = photoWidth;
		this.photoHeight = photoHeight;
		this.photo = 'Image' + photoImage;
		this.loader = 'Loading' + photoImage;
		this.photoBox = 'optional';
	},
	setNewPhotoParams: function()
	{
		Element.setSrc(this.photo, photoDir + photoId + this.photoImage + ".jpg");
		Element.setWidth(this.photo, this.photoWidth, {queue: 'front'});
		Element.setHeight(this.photo, this.photoHeight);
	},
	showPhoto: function()
	{
		new Effect.Fade(this.loader, {delay: 0.5, duration: 0.3});
		new Effect.Appear(this.photo, {duration: 0.5, queue: 'end'});
	},
	initSwap: function()
	{
		Element.show(this.loader);
		Element.hide(this.photo);
		this.setNewPhotoParams();
	}
}

/*--------------------------------------------------------------------------*/

var myrules = {
	'#ImageA' : function(element)
	{
		element.onload = function()
		{
			var myPhoto = new Slideshow(photoId, "A", 367, 312);
			myPhoto.showPhoto();
		}
	},
	'#ImageB' : function(element)
	{
		element.onload = function()
		{
			var myPhoto = new Slideshow(photoId, "B", 183, 116);
			myPhoto.showPhoto();
		}
	},
	'#ImageC' : function(element)
	{
		element.onload = function()
		{
			var myPhoto = new Slideshow(photoId, "C", 183, 116);
			myPhoto.showPhoto();
		}
	},
	'#service1' : function(element)
	{
		element.onclick = function()
		{
			photoId = 0;
            init();
            return false;
		}
	},
	'#service2' : function(element)
	{
		element.onclick = function()
		{
			photoId = 1;
            init();
            return false;
		}
	},
	'#service3' : function(element)
	{
		element.onclick = function()
		{
			photoId = 2;
            init();
            return false;
		}
	},
	'#service4' : function(element)
	{
		element.onclick = function()
		{
			photoId = 3;
            init();
            return false;
		}
	},
	'#service5' : function(element)
	{
		element.onclick = function()
		{
			photoId = 4;
            init();
            return false;
		}
	},
	'#service6' : function(element)
	{
		element.onclick = function()
		{
			photoId = 5;
            init();
            return false;
		}
	},
	'#service7' : function(element)
	{
		element.onclick = function()
		{
			photoId = 6;
            init();
            return false;
		}
	},
	a : function(element)
	{
		element.onfocus = function()
		{
			this.blur();
		}
	}
};

function setServiceItem(id)
{
    var amount = 7;
    for (var i=0; i<amount; i++) $("service" + (i + 1)).className = "";
    $("service" + (photoId + 1)).className = "active";
}

Behaviour.addLoadEvent(init);
Behaviour.apply();
function init()
{
	var myPhotoA = new Slideshow(photoId, "A", 367, 312);
	var myPhotoB = new Slideshow(photoId, "B", 183, 116);
	var myPhotoC = new Slideshow(photoId, "C", 183, 116);
	myPhotoA.initSwap();
	myPhotoB.initSwap();
	myPhotoC.initSwap();
	setServiceItem();
}