/*
 * MagniBox - jQuery Plugin
 * Zoomable Srable Dupable Cipable Chujable Cycki
 *
 * Documentation included in package bought on CodeCanyon
 * 
 * Copyright (c) 2010 Rezoner Sikorski
 *
 * Version: 1.0.1 (30/07/2010)
 * Requires: jQuery v1.42+
 *
 */
 
 (function($) {
	
	var config = {
		width: 640,
		height: 400,
		duration: 300,
		edge: 64,
		disableIE6: true
	};

	
/* common functions ----------------------------------------------------------*/

	var mouseX, mouseY;

	var abort = false;

	var screenWidth, screenHeight;
	var hover = false;
	var animated = false;
	var title = false;
	var titlePadding = [ ];

	var imageWidth;
	var imageHeight;
	var thumbWidth;
	var thumbHeight;

	var width = 128;
	var height = 128;

	var lPageX = 0;
	var lPageY = 0;
	
	var prevButtonWidth = 48;
	
	var selectedIndex = 0;
	var selectedGroup = '';
		
	var groups = {};
	
	var loaded = false;

	function echo( m ){
		$("#console").append( m );
	}
	
	function overlay( state ) {
	
		if( state ) {
			$("#magnibox-overlay").css({opacity:0.8, left:0, top:0}).show();
			$("#magnibox-pan").hide();
			$("#magnibox-footer").css({ 
				width: config.width,
				left: screenWidth / 2 - config.width / 2,
				top: config.height /2 + screenHeight / 2
				 
			});
			abort = false;
			
		} else {
			$("#magnibox-pan img").stop();
			$("#magnibox-pan").stop();
			$("#magnibox-window *").stop();
			$("#magnibox-window").stop().hide();
			$("#magnibox-overlay").hide();
			$("#magnibox-footer").hide();
			abort = true;
		}
	}	

	function magniboxMagnify( x, y, ignoreImg ) {
			
			animated = true;
						
			if( imageWidth > config.width ){ width = config.width; } else width = imageWidth;
			if( imageHeight > config.height){ height = config.height; } else height = imageHeight;
			
			resizeWindow( width, height );

			var w = imageWidth - width;
			var h = imageHeight - height;
		
			var sw = ( w / width );
			var sh = ( h / height );
			
//			if( imageHeight > config.height ) $(this).animate({height: config.height}, config.duration );
			$("#magnibox-window").animate({
				left: screenWidth / 2 - width / 2
			}, config.duration );
			if( !ignoreImg ) {
			$("#magnibox-pan").children('img').animate({
				width:imageWidth, height:imageHeight,
				"margin-left": - parseInt( ( x - $("#magnibox-pan").offset().left  ) * sw ),
				"margin-top": - parseInt( (  y - $("#magnibox-pan").offset().top ) * sh )				
			}, config.duration, function() {
				animated = false;
				if( abort ) overlay( false );
			});
			} else animated = false;

	}

	function pan( x, y, $o ) {
		
		x = x - config.edge;
		y = y - config.edge;
		
		var w = imageWidth - width;
		var h = imageHeight - height;
		
		var sw = ( w / ( width - config.edge*2 ) );
		var sh = ( h / ( height - config.edge*2) );

		var ml = ( x - $o.offset().left  ) * sw;
		var mt = ( y - $o.offset().top ) * sh;
		

		
		if( ml < 0 ) ml = 0;
		if( mt < 0 ) mt = 0;
		if( ml > w ) ml = w;
		if( mt > h ) mt = h;

		$o.children('img').css({
			"margin-left": - parseInt( ml ),
			"margin-top": - parseInt( mt )
		});
		
	}

	function resizeWindow( w, h ) {
		width = w; height = h;
		$("#magnibox-window").animate({ width:w, height:h, left:screenWidth/2 - w/2, top:screenHeight/2 - h/2 }, config.duration );
		$("#magnibox-pan").animate({width:w, height:h}, config.duration );
		$('#magnibox-next').css({height:h});
		$('#magnibox-prev').css({height:h});
	}
	
	function magniboxShow( $o ) {
		loaded = false;
		
		var rel = $o.attr('rel');
		animated = true;

		title = $o.attr('title');

		var data = $o.data('magnibox');
		
		if( groups[rel] > 1 ){ 
			$("#magnibox-footer #magnibox-pagination").show();
			$("#magnibox-footer").fadeIn( config.duration );
		} else {
			$("#magnibox-footer #magnibox-pagination").hide();
			if( !title )
				$("#magnibox-footer").hide();
			else
				$("#magnibox-footer").fadeIn( config.duration );
		}

		
		selectedIndex = data.index;
		selectedGroup = rel;

		$('#magnibox-prev, #magnibox-next').hide();
		$('#magnibox-pan img').hide();
		
		$("#magnibox-window").show();
		
		overlay( true );
			
			$("#magnibox-window").addClass('magnibox-loading');
		
			var href = $o.attr('href');
			var img = new Image();
			
			$(img).error( function(){ 
				alert('Unable to load image'); overlay(false);
			} ).load( function() {
	
				thumbWidth = imageWidth = img.width;
				thumbHeight = imageHeight = img.height;
				
				$("body").append("<img src='"+href+"' class='destroy_me_please' />");
				thumbWidth = imageWidth = 	$(".destroy_me_please").width();
				thumbHeight = imageHeight = $(".destroy_me_please").height();
				$(".destroy_me_please").remove();


			if ( thumbWidth > config.width ) {
				thumbHeight = thumbHeight * (config.width / thumbWidth); 
				thumbWidth = config.width; 
				if ( thumbHeight > config.height ) { 
					thumbWidth = thumbWidth * ( config.height / thumbHeight ); 
					thumbHeight = config.height; 
				}
			} else if ( thumbHeight > config.height ) { 
				thumbWidth = thumbWidth * ( config.height / thumbHeight ); 
				thumbHeight = config.height; 
				if( thumbWidth > config.width ) { 
					thumbHeight = thumbHeight * (config.width / thumbWidth); 
					thumbWidth = config.width;
				}
			}
		
			duration = config.duration;


			$("#magnibox-window").animate({ }, config.duration, function(){
				animated = false;

				if( groups[rel] == 1 || data.index == 0 ) $("#magnibox-prev, #magnibox-next").hide();
				else {
					if( data.index > 1 ) {
						$("#magnibox-prev").show();
						$('#magnibox-prev').css({height:thumbHeight});
					}
						else $("#magnibox-prev").hide();
					if( data.index < groups[rel] ) {
						$("#magnibox-next").show();
						$('#magnibox-next').css({height:thumbHeight});
					}						
						else $("#magnibox-next").hide();
				}
				
				$("#magnibox-footer #magnibox-pagination").html( "<span>" + data.index + "</span> / <span>" + groups[rel] +"</span>" );
				$("#magnibox-footer #magnibox-desc").html( title );

				$("#magnibox-pan img").css({width:imageWidth, height:imageHeight}).attr('src', href ).fadeIn(duration);

				$("#magnibox-ambient-top").show();				
		
				var windowOffset = $("#magnibox-window").offset();
				// alert( width );
				hover =  mouseX >= windowOffset.left && mouseX <= windowOffset.left + imageWidth &&
							mouseY >= windowOffset.top && mouseY <= windowOffset.top + thumbHeight;


				if( !hover ) {
					// $("#magnibox-pan img:first").animate({ width:thumbWidth, height:thumbHeight }, duration );
					$("#magnibox-pan").animate({ width:thumbWidth, height:thumbHeight }, duration );
					$('#magnibox-pan').mouseout();
				}else {
					// echo ( lPageX );
					//magniboxMagnify( lPageX, lPageY );
					magniboxMagnify( lPageX, lPageY, true );
					$("#magnibox-pan").animate({ width:width, height:height }, duration );
					pan( lPageX, lPageY, $("#magnibox-pan") );
				}
				
				$("#magnibox-window").removeClass('magnibox-loading');
	
				if( abort ) overlay( false );
			});
	
			loaded = true;
			
			});
			
			img.src = href;
		
		
	}
		
	function setup( $o, options ) {

	//	if ( $.browser.msie ) { if( parseInt( $.browser.version ) == 6 ) config.duration = 0 }

		if( config.width == 'auto' ) config.width = screenWidth * 0.8;
		if( config.height == 'auto' ) config.height = screenHeight * 0.6;
	
		var rel = $o.attr('rel');
		 
		if( rel ) { 
			if( groups[rel] == undefined )
				groups[rel] = 1;
			else groups[ rel ]++;
			
			var index = groups[rel];
			$o.addClass('magnibox-index-'+index);
		} else var index = 0; 

		var data = { index : index };
	
		$o.click( function() {
			magniboxShow( $(this), true  );
			return false;
		});
		
		$o.data('magnibox', data );
	}
	
	$.magnibox = function( command, options ){
		switch( command ){
				case 'config':
					config = $.extend( {}, config, options );					
				break;
				case 'defaults':
					for( key in options ) {
						defaults[key] = $.extend( {}, defaults[key], options[key] );
					}
					
				break;
						
			};
	}

	$.fn.magnibox = function( command, options ){
		
		if( config.disableIE6 && $.browser.msie && parseInt($.browser.version) <= 6 ) {
			if( typeof command == 'object' ){
				this.attr('target', '_blank');	
			}
			return this;
		}

		if( config.disableIE7 && $.browser.msie && parseInt($.browser.version) <= 7 )
			return this;
	
		if( typeof command == 'object' ){
			return this.each(function( i, o ){
				setup( $(o), command );
			});
		}
		else {
			if( typeof options != 'object' ) options = { }
			options.type = command;

			return this.each(function( i, o ){
				setup( $(o), options );
			});
		};	
	};

/* on document ready */

	$( function() {

	$("body").prepend( 
		'<div id="magnibox-overlay"></div>' +
		'<div id="magnibox-window">' +
		'<div id="magnibox-pan">' +
			'<div id="magnibox-prev"></div>' +
				'<img />' +
			'<div id="magnibox-next"></div>' +
		'</div>' +
		'<p id="magnibox-title"></p>' +
		'</div>' +
		'<div id="magnibox-footer"><table cellspacing="0" cellpadding="0"><tr>' +
			'<td id="magnibox-pagination"></td>' +
			'<td id="magnibox-desc"></td>' +
		'</tr></table></div>'  
 );
			
	
	screenWidth  = $(window).width();
	screenHeight = $(window).height();
	
	$("#magnibox-pan").append("<div id='magnibox-ambient-top'></div>");
		
	$("#magnibox-window").css({left:screenWidth/2 - $("#magnibox-window").width()/2, top:screenHeight/2 - $("#magnibox-window").height()/2 });
	
	$("#magnibox-overlay").css({ opacity : 0.5, height: $(window).height() }).click( function(){
		overlay( false );
	});

	$('#magnibox-prev, #magnibox-next').hide().css({opacity:0.0}).mouseenter(
		function() {
			$(this).css({opacity:0.5});
		}).mouseleave( 
		function() {
			$(this).css({opacity:0.0});
		});
		
	$('#magnibox-next').click( function() {
		if( selectedGroup ) magniboxShow( $(".magnibox-index-"+(selectedIndex+1)+"[rel="+selectedGroup+"]" ) );
	});
	$('#magnibox-prev').click( function() {
		if( selectedGroup ) magniboxShow( $(".magnibox-index-"+(selectedIndex-1)+"[rel="+selectedGroup+"]" ) );
	});
	
	$('#magnibox-pan').mouseenter(
		function( e ) {
			
			// if( animated ) return false;
			if( abort ) { overlay(false); return false;  }
			if( !loaded) return false;
			hover = true;
			magniboxMagnify( e.pageX, e.pageY );			
		}).mouseleave( function() {
			if( abort ) { overlay(false); return false;  } 
			hover = false;
			resizeWindow( thumbWidth, thumbHeight );
			
			$(this).children('img').animate({
				width:thumbWidth, height:thumbHeight, 'margin-left':0, 'margin-top':0
			}, config.duration );
			
	});	
	
	$('#magnibox-pan').mousemove( function( e ) {
		if( !loaded || abort ) return false;
		
		// hover = true;
		if( !hover ) return false;
		lPageX = e.pageX; lPageY = e.pageY;
		
		if( animated ) return false; 
		
		pan( e.pageX, e.pageY, $(this) );

	});	

	
	$(document).mousemove( function(e) {
		mouseX = e.pageX;
		mouseY = e.pageY;
	});
	
	});

	
})(jQuery);