var hotspots = $.Class.create({

	indexproduct: 0,
	products: null,
	thumbs: null,

	indexspot: 0,
	spots: null,
	descriptions: null,

	initialize: function( node ) {

		this.products = node.children('.series').children('div');
		this.thumbs = node.children('.thumbs').children('img');

		this.bindThumbs();
		this.bindSpots();

	},

	bindThumbs: function () {

		var mthis = this;

		this.thumbs.each( function( index, thumb ) {

			$(thumb).click(function(){mthis.showProduct(index);});
			$(thumb).mouseover(function(){$(this).addClass('hover');});
			$(thumb).mouseout(function(){$(this).removeClass('hover');});

		});

	},

	bindSpots: function () {

		var mthis = this;

		this.spots = $(this.products[this.indexproduct]).find('img.spot');
		this.descriptions = $(this.products[this.indexproduct]).find('div.description p');

		$(this.products[this.indexproduct]).find('area').each( function( index, area ) {

			$(area).mouseover(function(){mthis.showSpot(index);});
			$(area).mouseout(function(){mthis.hideSpot();});

		});

	},

	showProduct: function ( index ) {

		$(this.thumbs[this.indexproduct]).removeClass('selected');
		$(this.products[this.indexproduct]).hide();

		this.indexproduct = index;

		$(this.thumbs[this.indexproduct]).addClass('selected');
		$(this.products[this.indexproduct]).show();

		this.bindSpots();

	},

	showSpot: function ( index ) {

		$(this.spots[this.indexspot]).parent('div.spots').children('img:first-child').hide();

		$(this.spots[this.indexspot]).hide();
		$(this.descriptions[this.indexspot]).hide();
		$(this.descriptions[this.indexspot]).parent('div.description').hide();

		this.indexspot = index;

		$(this.spots[this.indexspot]).show();
		$(this.descriptions[this.indexspot]).show();
		$(this.descriptions[this.indexspot]).parent('div.description').show();


	},

	hideSpot: function () {

		$(this.spots[this.indexspot]).parent('div.spots').children('img:first-child').show();

		$(this.spots[this.indexspot]).hide();
		$(this.descriptions[this.indexspot]).hide();
		$(this.descriptions[this.indexspot]).parent('div.description').hide();

	}

});