function init() 
{
	visual.idThumb = 'thumb';
	visual.idSlide = 'slide';
	visual.separatorId = '-';
	
	// events
	jQuery('.thumb').bind('click', function(e)
	{
        thumbClick( jQuery(this) );
    });
	
	jQuery('.thumb').bind('mouseover mouseout', function(e)
	{
		thumbHover( jQuery(this) );
	});
}

// initializing visual object
var visual = 
{
	idThumb: null,
	idSlide: null,
	separatorId: null,
	
	slides: 
	{
		changeSelected: function ( thumb )
		{
			selectedSlide = jQuery('.slide.selected');
			selectedSlide.css( 'display', 'none' );
			selectedSlide.removeClass('selected');
			
			idFragments = thumb.attr('id').split(visual.separatorId);
			newSlideId = visual.idSlide + visual.separatorId + idFragments[1];
			newSlide = jQuery('#' + newSlideId);
			newSlide.fadeIn('slow');
			newSlide.addClass('selected');
		}
	},
	thumbs:
	{
		hover: function ( thumb )
		{
			thumb.toggleClass('hover');
		},
		
		changeSelected: function ( thumb )
		{
			jQuery('.thumb.selected').removeClass('selected');
			thumb.addClass('selected');
		}
	}
}


function thumbClick( thumb )
{
	visual.thumbs.changeSelected( thumb );
	visual.slides.changeSelected( thumb );
}

function thumbHover( thumb )
{
	visual.thumbs.hover( thumb );
}


jQuery(document).ready(function()
{
	init();
});