$(document).ready( function() {
	
	var index = -1;
	
	for( var i = 0; i < $( '.image-border2' ).length; i++ )
	{
		$( '.image-border2' ).eq( i ).click( show );
		$( '.image-border' ).eq( i ).click( show2 );
		
		$( '.image-border2' ).eq( i ).bind("mouseenter", mouseover);
		$( '.image-border2' ).eq( i ).bind("mouseleave", mouseout);
		
		$( '.image-border' ).eq( i ).bind("mouseenter", mouseover);
		$( '.image-border' ).eq( i ).bind("mouseleave", mouseout);
	}
	
	show();
	
	function mouseover()
	{
		$('#image-bg-border').css('width', $('.first-image').eq(0).width() - 20);
		$('#image-bg-border').css('height', $('.first-image').eq(0).height() - 20);
		
		$('#image-bg-border').css('display', 'block');
		//alert();
	}
	
	function mouseout()
	{
		$('#image-bg-border').css('display', 'none');
	}
	
	function show() {
		if(index + 1 >= $( '.first-image' ).length)
		{
			return;
		}
		index++;
		for( var i = 0; i < $( '.first-image' ).length; i++ )
		{
			if( i != index )
			{
				$( '.first-image' ).eq( i ).css( 'display', 'none' );
			}
			else
			{
				$( '.first-image' ).eq( i ).css( 'display', 'block' );
			}
		}
	}
	
	function show2() {
		if(index - 1 < 0)
		{
			return;
		}
		index--;
		for( var i = 0; i < $( '.first-image' ).length; i++ )
		{
			if( i != index )
			{
				$( '.first-image' ).eq( i ).css( 'display', 'none' );
			}
			else
			{
				$( '.first-image' ).eq( i ).css( 'display', 'block' );
			}
		}
		
		
		
	}
	
} );