var frameSize = 100;

$('document').ready( function() {
	$('.models .item').hover(
		function() {
			$(this).addClass('active');
		},
		function() {
			$(this).removeClass('active');
		}
	);

	$('.links area').each( function(i) {
		$(this).hover( function() {
			//alert($('.animation').css('backgroundPosition'));
			switch($('.animation').css('backgroundPosition')) {
				case '0px 0px':
				case '0pt 0pt':
				case '0px 0pt':
					switch (i) {
						case 1:
							$('.animation').animate({width: '100px'}, 0, function() {
								$('.animation').css('backgroundPosition', -( frameSize * 1 ) + 'px 0');
								$('.animation').animate({width: '100px'}, 100, function() {
									$('.animation').css('backgroundPosition', -( frameSize * 2 ) + 'px 0');
									$('.animation').animate({width: '100px'}, 100, function() {
									    $('.animation').css('backgroundPosition', -( frameSize *3 ) + 'px 0');
									});
								});
							});
						break;

						case 2:
							$('.animation').animate({width: '100px'}, 0, function() {
								$('.animation').css('backgroundPosition', -( frameSize * 1 ) + 'px 0');
								$('.animation').animate({width: '100px'}, 50, function() {
									$('.animation').css('backgroundPosition', -( frameSize *
									2 ) + 'px 0');
									$('.animation').animate({width: '100px'}, 50, function() {
										$('.animation').css('backgroundPosition', -( frameSize *
										3 ) + 'px 0');
										$('.animation').animate({width: '100px'}, 50, function() {
											$('.animation').css('backgroundPosition', -( frameSize *
											4 ) + 'px 0');
											$('.animation').animate({width: '100px'}, 50, function() {
												$('.animation').css('backgroundPosition', -( frameSize *
												5 ) + 'px 0');
												$('.animation').animate({width: '100px'}, 50, function() {
													$('.animation').css('backgroundPosition', -( frameSize *
													6 ) + 'px 0');
												});
											});
										});
									});
								});
							});
						break;
					}
				break;

				case '-' + frameSize * 3 + 'px 0px':
				case '-' + frameSize * 3 + 'px 0pt':
					switch (i) {
						case 0:
							$('.animation').animate({width: '100px'}, 0, function() {
								$('.animation').css('backgroundPosition', -( frameSize * 2 ) + 'px 0');
								$('.animation').animate({width: '100px'}, 100, function() {
									$('.animation').css('backgroundPosition', -( frameSize * 1 ) + 'px 0');
									$('.animation').animate({width: '100px'}, 100, function() {
										$('.animation').css('backgroundPosition', -( frameSize * 0 ) + 'px 0');
										//alert($('.animation').css('backgroundPosition'));
									});
								});
							});
						break;
						case 2:
							$('.animation').animate({width: '100px'}, 0, function() {
								$('.animation').css('backgroundPosition', -( frameSize * 4 ) + 'px 0');
								$('.animation').animate({width: '100px'}, 100, function() {
									$('.animation').css('backgroundPosition', -( frameSize * 5 ) + 'px 0');
									$('.animation').animate({width: '100px'}, 100, function() {
										$('.animation').css('backgroundPosition', -( frameSize * 6 ) + 'px 0');
									});
								});
							});
						break;
					}
				break;

				case '-' + 2 * frameSize * 3 + 'px 0px':
				case '-' + 2 * frameSize * 3 + 'px 0pt':
					switch (i) {
						case 0:
							$('.animation').animate({width: '100px'}, 0, function() {
								$('.animation').css('backgroundPosition', -( frameSize * 5 ) + 'px 0');
								$('.animation').animate({width: '100px'}, 50, function() {
									$('.animation').css('backgroundPosition', -( frameSize * 4 ) + 'px 0');
									$('.animation').animate({width: '100px'}, 50, function() {
										$('.animation').css('backgroundPosition', -( frameSize * 3 ) + 'px 0');
										$('.animation').animate({width: '100px'}, 50, function() {
											$('.animation').css('backgroundPosition', -( frameSize * 2 ) + 'px 0');
											$('.animation').animate({width: '100px'}, 50, function() {
												$('.animation').css('backgroundPosition', -( frameSize * 1 ) + 'px 0');
												$('.animation').animate({width: '100px'}, 50, function() {
													$('.animation').css('backgroundPosition', -( frameSize * 0 ) + 'px 0');
												});
											});
										});
									});
								});
							});
						break;

						case 1:
							$('.animation').animate({width: '100px'}, 0, function() {
								$('.animation').css('backgroundPosition', -( frameSize * 5 ) + 'px 0');
								$('.animation').animate({width: '100px'}, 100, function() {
									$('.animation').css('backgroundPosition', -( frameSize * 4 ) + 'px 0');
									$('.animation').animate({width: '100px'}, 100, function() {
										$('.animation').css('backgroundPosition', -( frameSize * 3 ) + 'px 0');
									});
								});
							});
						break;
					}
				break;

			}
		});
	});
});


function views(url,name)
{
	foto=window.open('/images/view.php?foto='+url+'&name='+name,'foto','width=300,height=300');
	foto.focus();
}