/******************************************************
    * jQuery plug-in to open an image in fullscreen
    * Developed by Carlo 'kj'
    * Useage: anyone so long as credit is left alone
******************************************************/

(function($) {
	// Global Namespace
	var cOptions;
	var consoleElement;
	var startDragMouseOffset = {};
	
    // Define the plugin
    $.fn.htmlConsole = function(options) {
    
    	cOptions = $.extend({}, options );
    	
    	$("body").append('<div id="kjconsole"></div>');
		consoleElement = $("#kjconsole");
		
		consoleElement.css({
			"opacity": 0.7,
			"width": 300,
			"height": 150,
			"background-color": "#000",
			"overflow": "auto",
			"color": "#aaa",
			"font-size": "11px",
			"font-family": "sans-serif",
			"padding": "5px",
			"position": "absolute",
		
			"z-index": "999"
		});
		
		$('body').append(console);
		
		
		consoleElement.bind('touchstart mousedown', function(event) {
			
			event.preventDefault();  
			
			var mouseX = (typeof event.originalEvent.changedTouches === 'undefined')?event.pageX:event.originalEvent.changedTouches[0].pageX;
			var mouseY = (typeof event.originalEvent.changedTouches === 'undefined')?event.pageY:event.originalEvent.changedTouches[0].pageY;

			var offset = consoleElement.offset();
			
    		startDragMouseOffset.top = mouseY - offset.top;
    		startDragMouseOffset.left = mouseX - offset.left;
			
			$(document).bind('touchmove mousemove', drag);
		});
		
		consoleElement.bind('touchend mouseup', function(event) {
			$(document).unbind('touchmove mousemove', drag);
		});
		
		
		if (typeof window.console === 'undefined'){
    		window.console = {};
  		}
    
		window.console.trace = function(message) {
			consoleElement.prepend(message + '<br />');
		}
		
    };
    
    
    function drag(event) {
		var mouseX = (typeof event.originalEvent.changedTouches === 'undefined')?event.pageX:event.originalEvent.changedTouches[0].pageX;
		var mouseY = (typeof event.originalEvent.changedTouches === 'undefined')?event.pageY:event.originalEvent.changedTouches[0].pageY;
		
    	//console.log(event.pageY - mousePosY);
    
    	consoleElement.offset({
			"top": mouseY - startDragMouseOffset.top,
			"left": mouseX- startDragMouseOffset.left
		});
    	//console.trace(consoleElement.offset().top)
    }
 

})(jQuery);