jQuery.viewer = {
	
	disabled: false,

	folders: {
		small: '92x86',
		medium: '297x278',
		large: '1200x1200'
	},

	index: 1,
	
	limit: {
		width: 682,
		height: 376
	},

	data: [],

	thumbnail: function($button) {
		if (jQuery.viewer.disabled) return;

		jQuery.viewer.disabled = true;

		$index = parseInt($button.attr('rel'), 10);
		jQuery.viewer.index = $index;

		$parent = $('.' + $button.attr('parent') + ' .content');
		$image = $parent.find('img').eq(0);
		$image.stop(true);

		if ($image.hasClass('viewer-zoom-image'))
		{
			$image.draggable('destroy');
			$image.fadeTo(1000, 0, function() {
				jQuery.viewer.fade($index, $parent);								  
			});
			
		}
		else
		{
			jQuery.viewer.fade($index, $parent);
		}
	},

	fade: function($index, $parent)
	{		
		
		$popup = ($parent.parents('#productlightbox').length > 0);

		$value = "<img src=\"" + jQuery.viewer.data[$index - 1].split('{folder}').join(jQuery.viewer.folders.medium) + "\" rel=\"" + $index + "\"" + (!$popup ? " class=\"thickbox viewer-popup\" href=\"#TB_inline?height=530&amp;width=722&amp;inlineId=myOnPageContent\"" : " class=\"viewer-zoom\"") + ($popup ? " style=\"margin-left: 188px;\"" : "") + " />";

		$image = $parent.find('img').eq(0);

		if ($image.length == 0) {
			$parent.html($value);
			$image = $parent.find('img');
		}
		else {
			$image.after($value);
			$image = $parent.find('img').eq(1);
		}

		$image.hide();
		$image.load(function() {
			$image = $(this);
			jQuery.viewer.reset($image);
			$image.show();
			$image.fadeTo(0, 0);
			$image.fadeTo('slow', 1, function() {
					
				if ($parent.find('img').length > 1)
				{
					$parent.find('img').eq(0).remove();
					$image = $parent.find('img').eq(0);
				}

				jQuery.viewer.disabled = false;
				jQuery.viewer.reset($image);
				jQuery.viewer.zoom();
				jQuery.viewer.update();
	
				tb_init($image.filter('.thickbox'));
			});
		});
	},

	popup: function() {
		$buttons = $('.viewer-images-popup .navigation a');
		$buttons.removeClass('active');
		$buttons.eq($index - 1).addClass('active');
		$parent = $('.viewer-images-popup').find('div.content');
		$parent.html("<img src=\"" + jQuery.viewer.data[jQuery.viewer.index - 1].split('{folder}').join(jQuery.viewer.folders.medium) + "\" class=\"viewer-zoom\" rel=\"1\">");
		$image = $parent.find('img');
		$image.load(function() {
			jQuery.viewer.reset($(this));
		});
		jQuery.viewer.zoom();
	},

	reset: function($image) {
		$popup = ($image.parents('#productlightbox').length > 0);

		if ($popup)
		{
			$width =jQuery.viewer.limit.width;
			$height = jQuery.viewer.limit.height;
		}
		else
		{
			$width = 465;
			$height = 278;
		}
		
		$dimensions = $image.data('dimensions');

		if ($dimensions == null)
		{
			$dimensions = {
				width: $image.width(),
				height: $image.height()
			};
			$image.data('dimensions', $dimensions);
			$image.css('width', $dimensions.width);
			$image.css('height', $dimensions.height);
			
			$image.css('marginLeft', ($width - $dimensions.width) / 2);
			$image.css('marginTop', ($height - $dimensions.height) / 2);
		}
	},

	zoom: function($image, $scale, $callback) {
		if (jQuery.viewer.disabled) return;

		if ($image == null)
		{
			$('.viewer-images-popup .hotspot').show();
			$('.viewer-images-popup .hotspot').cursor('/images/zoom.gif');
			$('.viewer-images-popup .hotspot, .viewer-images-popup .content img.viewer-zoom').click(function() {
				$image = $('.viewer-images-popup .content').find('img').eq(0);
				$index = $image.attr('rel');
				jQuery.viewer.zoom($image, 200);					
			});	

			return;
		}

		jQuery.viewer.disabled = true;
		jQuery.viewer.reset($image);

		$dimensions = $image.data('dimensions');

		$scale = 1200 / $dimensions.height;

		$width = $dimensions.width * $scale;
		$height = $dimensions.height * $scale;

		$image.draggable('destroy');
		$image.data('scale', $scale);

		$x = ((jQuery.viewer.limit.width - $width) / 2) + 'px';
		$y = (($dimensions.height - $height) / 2) + 'px';
		
		$('.viewer-images-popup .hotspot').hide();
		$('.viewer-images-popup .content').fadeTo(0, 1);
		$('.viewer-images-popup .navigation').fadeTo(0, 1);

		$image.animate(
			{
				height: $height + 'px',
				width: $width + 'px',
				marginTop: $y,
				marginLeft: $x
			},
			1000,
			null,
			function() {
				$image.before("<img src=\"" + $image.attr('src').split(jQuery.viewer.folders.medium).join(jQuery.viewer.folders.large) + "\" class=\"viewer-zoom-image\" />");
				$full = $image.prev().eq(0);
				$full.css('marginTop', $y);
				$full.css('marginLeft', $x);
				$full.load(function() {		
					$full.show();
					$full.fadeTo(0, 0);
					$full.fadeTo(1000, 1, function() {								 
						$full.draggable({ cursor: 'pointer' });
						$image.remove();
						jQuery.viewer.disabled = false;

						if ($callback != null) $callback();										 
					});
				});
			}
		);	
	},
	
	update: function() {

		$('.viewer-thumbnail').click(function() {
			$(this).closest('ul').find('a').removeClass('active');
			$(this).addClass('active');
			jQuery.viewer.thumbnail($(this));	
			return false;
		});
							 
		$('.viewer-popup').click(function() {
			jQuery.viewer.popup();
			return false;
		});

		if (jQuery.viewer.data.length > 0) return;

		$data = [];
		$images = $('.navigation').find('li img');
		
		for ($i = 0; $i < $images.length; $i++) {
			$data.push($($images[$i]).attr('src').split(jQuery.viewer.folders.small).join('{folder}'));
		}
		
		jQuery.viewer.data = $data;

		$('.viewer-thumbnail[parent=viewer-images]').eq(0).trigger('click');

		//$('.viewer-popup').eq(0).trigger('click');
	}
};


jQuery.fn.cursor = function($url) {
	if (jQuery.browser.msie) return;
	
	$move = function($e) {						 
	  $cursor.css('top', $e.pageY - $(this).offset().top - 9);
	  $cursor.css('left', $e.pageX - $(this).offset().left - 9);
   }

	$show = function() {
		$cursor.show();	
	};
	
	$hide = function () {
		$cursor.hide();
	};

	$item = this;
	$item.find('.cursor').remove();
	$item.unbind('mouseover', $show);
	$item.unbind('mouseout', $hide);
	$item.unbind('mousemove', $move);

	if ($url == null) return;

	$item.prepend("<div class=\"cursor\" style=\"position: absolute; display: none; width: 18px; height: 18px; background: url(" + $url + ") center center no-repeat; z-index: 100;\"></div>");

	$cursor = $item.find('.cursor');

	$item.hover(
		function() {
			$cursor.show();	
		},
		function () {
			$cursor.hide();
		}
	);

	$item.bind('mouseover', $show);
	$item.bind('mouseout', $hide);
	$item.bind('mousemove', $move);
};

$().ready(function() {
	jQuery.viewer.update();
});