/***************************************************
*	ZoomPopup Plugin
*	Author: Jeff Clement
*	Syntax: $( button selector ).zoompopup( url, { options } );
*	Options:
*		width		- INT
*		height		- INT
*		title		- STRING
*		theme		- STRING
*		resizable	- BOOLEAN (true or false)
*		draggable	- BOOLEAN (true or false)
*		modal		- BOOLEAN (true or false)
*	Dependencies:
*		jQuery (v1.4.2+)
*		jQuery UI (1.8.1+)
*
*****************************************************/

$(document).ready(function()
{
	jQuery.fn.noImage = function(){
		return this.each(function(){
			var tag = $(this);
			tag.error(function() { // this adds the onerror event to images
				$('.zoom-slider').hide();
				$('.zoom-container').css('background', 'none');
				tag.parents('[class^=zoom-dialog]').dialog('option', 'height', 80);	
				tag.parent().append('<div align="center"><p>Sorry, but there is no available zoom for this item</p></div>');
				return true;
			});
		});
	}

	$('[data-method=zoomPopup]').each(function(){
		$(this).zoomPopup($(this).attr('data-url'), { title : $(this).attr('title') });
	});
});

(function($) {

    $.fn.zoomPopup = function (url, options) {

        $.fn.zoomPopup.defaults = {
		width: 500,
		height: 500,
		title: 'Zoom',
		theme: '',
		resizable: false,
		draggable: false,
		modal: false
        };

        var properties = $.extend({}, $.fn.zoomPopup.defaults, options);
	
	if (url == '' || url == '!MEDIA9!' || url.substr(url.length - 1) == '/'){
			this.hide();
        }

        this.click(function() {

		var randNum = Math.floor(Math.random() * 1000);

		$('body').append('<div class="zoom-dialog' + randNum + '"></div>');	
		
		var dialog = $('.zoom-dialog' + randNum);

		dialog.html(
			'<div class="zoom-slider container">' +
				'<label>Zoom: </label>' +
				'<div id="slider">' + 
					'<div class="ui-slider-handle"></div>' +
				'</div>' +
			'</div>' +
			'<div class="zoom-container">' +
				'<div class="zoomer">' +
				'</div>' +
			'</div>'
		);

		dialog.dialog({
			title: 'Zoom: ' + properties.title,
			zIndex: 999,
			width: properties.width,
			height: properties.height,
			resizable: properties.resizable,
			draggable: properties.draggable,
			modal: properties.modal,
			close: function(event, ui) {
				$(this).dialog('destroy');	
				dialog.remove();	
			}
		});	
		
		dialog.prepend('<div id="loading"><div class="bar"></div></div>');
		dialog.find('#loading').css({
			left : (dialog.find('.zoom-container').width() * .5) - ($('#loading').find('div').width() / 2) + 15 + 'px',
			top : (dialog.find('.zoom-container').height() * .5) - ($('#loading').find('div').height() / 2) + 'px'	
		});

		var img = new Image();
		$(img).load(function(){
		
		$(this).hide();
		dialog.find('#loading').delay(250).fadeOut('slow', function(){
			$(this).remove();
		});
		dialog.find('.zoomer').append(this);
		$(this).fadeIn();
		
		dialog.find('img').noImage();

		dialog.find('.zoom-slider, .zoom-container').show();

		var scalesize = 100;
		dialog.find('.zoom-slider').find('label').html('Zoom: ' + scalesize + '%');

		dialog.find('.zoomer').css({
			fontSize: '50px',
			width: '5em',
			height: '5em',
			lineHeight: '5em'
		});

		var width = dialog.find('.zoomer').find('img').width() * .5;
		var height = dialog.find('.zoomer').find('img').height() * .5;
		dialog.find('.zoomer').find('img').css('width', width);
		dialog.find('.zoomer').find('img').css('height', height);

		dialog.find('.zoomer').find('img').position({
			of: dialog.find('.zoomer'),
			at: 'right bottom',
			my: 'center center',
			collision: 'none'
		});

		dialog.find('#slider').slider({
			value: 50,
			max: 100,
			min: 10,
			slide: function(event, ui){
				dialog.find('.zoomer').find('img').css({
					'height': ui.value * 10,
					'width': ui.value * 10,
					'fontSize': ui.value + 'px'
				});
				dialog.find('.zoomer').find('img').position({
					of: dialog.find('.zoomer'),
					at: 'right bottom',
					my: 'center center',
					collision: 'none'
				});
				var scalesize = ui.value/50;
				dialog.find('.zoom-slider').find('label').html('Zoom: ' + Math.floor(scalesize * 100) + '%');
			}
		});
		
		dialog.find('.zoomer').find('img').draggable({
			cursor: 'move',
			stop: function(e){
				if(e.pageX > dialog.offset().left + dialog.width() || e.pageX < dialog.offset().left || e.pageY < dialog.offset().top || e.pageY > dialog.offset().top + dialog.height()){	
					dialog.find('.zoomer').find('img').position({
						of: dialog.find('.zoomer'),
						at: 'right bottom',
						my: 'center center',
						collision: 'none'
					});
				}
			}
		});
	
	}).error(function() {
			alert('There was an error loading the image');
	}).attr('src', url);

	function formatPosition(element, direction){
		var position = parseInt(element.css(direction), 10);
		return position;
	}
	
	});
        return this;
    }
})(jQuery);