/*
 * jQuery PointOut Plugin
 * @author Ramon Lamana
 * @link http://www.rlamana.es
 * 
 * Based on Facebox plugin by Chris Wanstrath [ chris@ozmm.org ]
 * 
 * @version 0.1 (10.Sep.2009)
 * @requires jQuery v1.3.2 or later
 * 
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 */

(function(jQuery) 
{
	/**
	 * Desde que se abre un dialogo hasta 
	 * que se cierra contiene el elemento contenido
	 * del dialogo
	 */
	var _element = false;
	
	/**
	 * Los pngs incrustados en base64 para 
	 * evitar dependencias externas y problemas con rutas
	 */
	var png_border = "iVBORw0KGgoAAAANSUhEUgAAABEAAAAQCAYAAADwMZRfAAAAG0lEQVQ4jWMICgraQClmGDVk1JBRQ0YNCdoAAHYawHDC5WlcAAAAAElFTkSuQmCC";
	var png_tl_border = "iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAS0lEQVR42o3OoQ0AIAxEUZYi7NEluggewwy1dMNyBgIJCSe+uTxxKSKuRKQgRRV1ZGicIKOG/NVGa/jB9oPrkzNQWVhZ2FloLBwMnD51rC95s060AAAAAElFTkSuQmCC";
	var png_tr_border = "iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAARElEQVR42o3KoREAIAwEMJbi2KNLdBE8pjPUlg3Lo8BwvIhLEZEAB4MOCi0zy23H+TCg/uNR2TjYuDU2Khs7G42NzsZYRf6sL6b2F1EAAAAASUVORK5CYII=";
	var png_bl_border = "iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQ0lEQVQY02MICgpaD8QbCGEGILGMWIVTiFXYQqzCdGIVmhOl8P///yDF/cQqNCVKIZLifoIKkTSYQz3YAg06UDivBwBLtawvNrYbVAAAAABJRU5ErkJggg==";
	var png_br_border = "iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQ0lEQVQYlY3KoRUAIAhFUZbyuMdbgkXoFmaw6oaYyP5w2zXgCo6Jcasx1RhqdDVOJa6qMiWOX1ydOh5gAwkE4MDs0B5TPqwv1+d6zQAAAABJRU5ErkJggg==";
	var png_close_button = "R0lGODlhEAAWAMQAAJWVlW1tbczMzHp6ekxMTOzs7Nzc3OHh4VJSUnJyco6Ojpubm/f39/z8/Orq6vr6+mVlZWBgYObm5lRUVFhYWKOjo1ZWVrKysra2toeHh/Dw8F9fX1BQUFlZWf7+/v///yH5BAAAAAAALAAAAAAQABYAAAWx4CeOZGmeZoOmgPF5cPwJy/MxAAG58rwRAMaF0EHsXp5ZZNIhVBwDTocDOYgEG0Qzo/lApZPAQbDcMl6fQrQTXlI4mbNMrbVQigp5LKkZMCkTFTZ7MB8aAUxsAEmEHwcJTBMWRRUqMgYBWggBEHYIlWgGEFocA2MWnqCipAMOIhioFJ8NEFKlBWgfGAgUFAQXAAilrnu6wgkGDQADuI0fFwESIg96hB4N0oVI1knb3N8hADs=";
	
			
	/**
	 * La hoja de estilos
	 */
	var _pointout_css = "<style type='text/css'> " +
			"#pointout .b  {background:url('data:image/png;base64," + png_border + "');} " +
			"#pointout .tl {background:url('data:image/png;base64," + png_tl_border + "');} " +
			"#pointout .tr {background:url('data:image/png;base64," + png_tr_border + "');} " +
			"#pointout .bl {background:url('data:image/png;base64," + png_bl_border + "');} " + 
			"#pointout .br {background:url('data:image/png;base64," + png_br_border + "');} " + 
			"#pointout { left:0; position:absolute; text-align:left; top:0; z-index:100; } .pointout_dialog { position:relative; } #pointout table { border-collapse:collapse; } #pointout td { border-bottom:0; padding:0; } #pointout .body { background:#fff; padding:10px; width:370px; } #pointout img { border:0; margin:0; } #pointout .footer { border-top:1px solid #DDD; margin-top:10px; padding-top:5px; text-align:right; } #pointout .tl,.tr,.bl,.br { height:10px; overflow:hidden; padding:0; width:10px; } #pointout_overlay { background-color:#000; height:100%; left:0; position:fixed; top:0; width:100%; z-index:99; } .pointout_hide { z-index:-100; } * html #pointout_overlay { height:expression(document.body.scrollHeight>document.body.offsetHeight?document.body.scrollHeight:document.body.offsetHeight+'px'); position:absolute; } #pointout .loading,#pointout .image { text-align:center; } </style>";

	/**
	 * El codigo html de la caja de dialogo
	 */
	var _pointout_html = '<div id="pointout" style="display:none"> \
		 <div class="pointout_dialog"> \
		    <table class="pointout_table"> \
		      <tbody> \
		        <tr> \
		          <td class="tl"></td> \
		          <td class="b"></td> \
		          <td class="tr"></td> \
		        </tr> \
		        <tr> \
		          <td class="b"></td> \
		          <td class="body"> \
		            <div class="pointout_content" style="display: block;"> \
		            </div> \
		            <div class="footer" style="display: block;"> \
		              <a class="close_button" href="#"><img class="close_image" title="close" src="data:image/png;base64,' + png_close_button + '" /></a> \
		            </div> \
		          </td> \
		          <td class="b"></td> \
		        </tr> \
		        <tr> \
		          <td class="bl"></td> \
		          <td class="b"></td> \
		          <td class="br"></td> \
		        </tr> \
		      </tbody> \
		    </table> \
		  </div> \
		</div>';
		  
	/**
	 * Launches events on a PointOut dialog
	 * @param {mixed} action Event to lauch
	 * @public
	 */
	jQuery.fn.dialog = function(action)
	{
		var element = this[0];
				
		switch(action)
		{
			case 'open'	: _open(element); break;
			case 'close': _close(element); break;
			default:
				throw "Action not valid '" + action + "'";
			break;
		}
	};

	/**
	 * Hides dialog and triggers 'closed' event
	 * @trigger closed
	 * @private 
	 */
	function _close (element)
	{
		// Comprobamos si se ha creado ya una caja de dialogo
		if ($('#pointout').length == 0) 
			return;
		
		// Comprobamos que se ha introducido un elemento
		if (!element) return;

		// Restauramos contenido del dialogo
		var contenido = $('#pointout .pointout_content');
		contenido.clone(true).children().appendTo(element);
		contenido.empty();
		
		$('#pointout').hide();
		
		// Se lanza el evento 'closed'
		$(element).trigger('closed');
		
		$('#pointout .pointout_dialog').hide();
		$('#pointout_overlay').hide();
		
		_element = false;
	}

	/**
	 * Shows dialog and triggers 'open' and 'opened' events
	 * @trigger opened, open
	 * @private 
	 */
	function _open (element)
	{						
		// Comprobamos si se ha creado ya una caja de dialogo
		if ($('#pointout').length == 0) 
			$("body").append(_pointout_html);
		
		// Si ya existia un dialogo se cierra antes
		else
			_close(_element);
			
		// Se lanza el evento 'open'
		$(element).trigger('open');
		
		// Se limpia el contenido anterior por si hay algo
		$('#pointout .pointout_content').empty();
		
		// Se introduce el nuevo contenido
		$(element).children().clone(true).appendTo('#pointout .pointout_content');
		
		// Para evitar id's duplicados se borra, al cerrar se repondra el contenido
		$(element).empty();

		_element = element;
		
		// Se añaden eventos
		$("#pointout .close_button").click(function(){_close(_element);});
		
		$('#pointout .pointout_dialog').show();
		
		// Se muestra el overlay
		if ($('#pointout_overlay').length == 0) 
			$("body").append('<div id="pointout_overlay" class="pointout_hide"></div>');

		var overlay = $('#pointout_overlay').hide().addClass("pointout_overlay_background");
		overlay.css('opacity', .5);
		overlay.click(function(){_close(_element);});
		overlay.fadeIn(100, function()
		{
			// Se muestra el dialogo
			$('#pointout').fadeIn(500, function()
			{				
				// Se lanza el evento 'opened'
				$(element).trigger('opened');
			});
			
			$('#pointout .pointout_dialog').css
			({
		        top	: _getPageScroll()[1] + (_getPageHeight() / 10) + 100,
		        left: $(window).width() / 2 - ($('#pointout table').width() / 2)
			});
		});
	}	

	/**
	 * Returns array with x,y page scroll values
	 * getPageScroll() by quirksmode.com
	 * @private
	 */ 
	function _getPageScroll() 
	{
	    var xScroll, yScroll;
	    if (self.pageYOffset) 
		{
			yScroll = self.pageYOffset;
			xScroll = self.pageXOffset;
	    } 
	    else if (document.documentElement && document.documentElement.scrollTop) 
		{
			// Explorer 6 Strict
		    yScroll = document.documentElement.scrollTop;
		    xScroll = document.documentElement.scrollLeft;
	    } 
	    else if (document.body) 
		{
			// All other Explorers
		    yScroll = document.body.scrollTop;
		    xScroll = document.body.scrollLeft;	
	    }
	    return new Array(xScroll,yScroll) 
	}


	/**
	 * Returns page height
	 * Adapted from getPageSize() by quirksmode.com
	 * @private
	 */ 
	 function _getPageHeight() 
	 {
	 	var windowHeight
	    if (self.innerHeight) 
		{	
		    // all except Explorer
	    	windowHeight = self.innerHeight;
	    } 
	    else if (document.documentElement && document.documentElement.clientHeight) 
		{ 
		    // Explorer 6 Strict Mode
	    	windowHeight = document.documentElement.clientHeight;
	    } 
	    else if (document.body) 
		{ 
		    // other Explorers
	    	windowHeight = document.body.clientHeight;
	    }	
	    return windowHeight
	 }
	 
	$('head').append(_pointout_css);
	
})(jQuery);
// Plugin closure