/**
@author djjeck
*/

// TODO use $.data()

(function($) {
	if($ == undefined)
		; //TODO
	
	if(window.Blacktrend == undefined)
		window.Blacktrend = {};
	
	var template = undefined;
	var getGlassPane = function() { // TODO move to Blacktrend.dialogs
		//TODO move #popup_template declaration to js
		//TODO move css declaration to js
		
		if(template == undefined) {
			template = $('#popup_glasspane');
			
			var canhide = true; // XXX event source could be used instead?
			template.click(function() {
				if(canhide)
					$.address.path($.address.path().replace(/\/popup\/.+$/, ''));
				canhide = true;
			});
			$('#popup_template').click(function() {
				canhide = false; //avoids blur when clicking on popup
				// return false; // blocks also legit events like submit
			});
		}
		return template;
	};
	
	if(Blacktrend.Dialog == undefined) {
		Blacktrend.Dialog = function(element, options) {
			options = $.extend({
				// defaults
				glasspane: true, // if true, shows glasspane
				modal: false, // if true, dialog can be closed by clicking on glasspane
				fade: false, // uses animation when showing / hiding
				exclusive: true, // if true, only a Dialog at a time can be shown
				ready: function() {},
				onshow: function() {}
			}, options);
			
			options.exclusive = true; // TODO - now only true is supported
			
			// private
			var $element = $(element);
			
			
			// public
			this.shown = false;
			
			this.updateOptions = function(_options) {
				$.extend(options, _options);
			}
			
			this.getElement = function() {
				return element;
			};
			
			this.get$Element = function() {
				return $element;
			};
						
			this.show = function() {
				options.onshow();
				// TODO
				if(options.exclusive) { // TODO || other_shown_dialogs.any(isExclusive)
					//TODO Blacktrend.dialogs.hideAll();
				}
				$(options.glasspane?getGlasspane():element).animate(
					{ opacity: 1 },
					options.fade?'fast':0
					//, 'linear',
					//function() {
					//}
				);
			};
			
			this.hide = function() {
				// TODO
			};
			
			
			var dialog = this; //XXX
			$(function() { options.ready.call(dialog); });
		}
	}
	
	if(Blacktrend.dialogs == undefined)
		Blacktrend.dialogs = (function() {
			// private
			
			// public
			return {
				hideAll: function() {
					Blacktrend.popup.destroy();
					// TODO
				}
			};
		})();
	
	// TODO refactor below: move to Blacktrend.dialogs
	if(Blacktrend.tooltip == undefined)
		Blacktrend.tooltip = (function() {
			// private
			var default_tooltip = undefined;
			var container_element = undefined;
			
			
			var Tooltip = function(id, ready) {
				var tooltip = this;
				if(ready == undefined)
					ready = function() {
						if(!this.get$Element().hasClass('titled'))
							this.get$Element().
							prepend('<div class="top" />');
						
						this.get$Element().
						append('<div class="bottom" />').
						mouseleave(function() {
							tooltip.out();
						}).
						prepend(
							'<div class="background">'+
								'<div class="left"><div class="background_top"></div><div class="background_bottom"></div></div>'+
								'<div class="right"><div class="background_top"></div><div class="background_bottom"></div></div>'+
							'</div>'
						);
						
						var keepAlive = (function(event) {
							tooltip.shown = true;
							event.stopPropagation();
						});
						this.get$Element().children().
						mouseenter(keepAlive).
						mouseover(keepAlive);
					};
				// super constructor
				//XXX this.prototype = new Blacktrend.Dialog({});
				Blacktrend.Dialog.call(this, document.getElementById(id), {
						glasspane: false,
						modal: false,
						fade: false,
						ready: ready
					});
				
				// private
				
				
				// public
				this.over = function() {
					this.show();
				};
				
				this.out = function() {
					this.shown = false;
					// TODO buggy? investigate
					setTimeout(function() {
						if(!tooltip.shown) //still
							tooltip.hide();
					}, 800);
				};
				
				this.show = function() {
					this.shown = true;
					//this.get$Element().fadeIn('fast');
					this.get$Element().show();
				};
				
				this.hide = function() {
					// tooltip.get$Element().fadeOut('fast');
					this.get$Element().hide();
				};
				
				this.moveToContainer = function() {
					if(container_element == undefined)
						return;
					this.get$Element().appendTo('#flashmovieTwo');
				}
			};
			
			$(function() {
				// creates Popup objects for each popup div
				$('.tooltip').each(function() {
					var tooltip = new Tooltip(this.id);
					Blacktrend.tooltip.tooltips[this.id] = tooltip;
					tooltip.moveToContainer();
					myJavascriptObject.registerHotspot(this.id, new myJavascriptObject.HotSpot(
						function() { /* do nothing */ },
						function() { tooltip.over(); },
						function() { tooltip.out(); }
					));
				});
			});
			
			// public
			return {
				bind: function(element) {
					container_element = element;
					for(var i in Blacktrend.tooltip.tooltips)
						Blacktrend.tooltip.tooltips[i].moveToContainer();
					
					default_tooltip = new Tooltip(
						'default_tooltip',
						function() {							
							this.get$Element().
							mouseenter(function() {
								this.shown = true;
							}).
							mouseleave(function() {
								this.out();
							});
						}
					);
					
					var handler = function(event) {
						//should work even if container element is not bound
						$('#default_tooltip').css({
							// right: ($(document).width() - event.pageX) - ($(document).width() - $('#container').width()) / 2 - 120, //XXX magic number
							left: event.pageX - ($(document).width() - $('#container').width()) / 2 - 40, //XXX magic number
							top: event.pageY - $('#container').offset().top - $('#default_tooltip').height() - 5 //XXX magic number
						});
						event.stopPropagation();
					};
					
					$(container_element).mouseover(handler).mousemove(handler);
					$('#default_tooltip').mouseover(handler).mousemove(handler);
				},
				show: function(message) {
					$('#default_tooltip .content').html(message);
					default_tooltip.show();
				},
				hide: function() {
					default_tooltip.hide();
				},
				tooltips: {}
			};
		})();	

	if(Blacktrend.popup == undefined)
		Blacktrend.popup = (function() {
			// private			
			var Popup = function(id) {
				// super constructor
				//XXX this.prototype = new Blacktrend.Dialog({});
				Blacktrend.Dialog.call(this, document.getElementById(id), {
						glasspane: false,
						modal: false,
						fade: false
					});
				
				// public
				this.show = (function(overridden) { return function() {
					// TODO Blacktrend.dialogs.hideAll(); //TODO check if options.exclusive
					Blacktrend.tooltip.hide(); // XXX
					Blacktrend.popup.destroy();
					$('#popup_title').html(this.getTitle());
					$('#popup_content').append(this.getElement());
					this.shown = true;
					$(getGlassPane()).fadeIn('fast'); // TODO remove
					overridden();
				}} (this.show));
				
				this.setTitle = function(title) {
					this.get$Element().find('h1').html(title);
					if(this.shown)
						$('#popup_title').html(title);
				};
				
				this.getTitle = function() {
					return this.get$Element().find('h1').html();
				};
				
				this.getSubtitle = function() {
					return this.get$Element().find('h1').html();
				};
			};
			
			$(function() {
				$('#popup_close').click(
					function() {
						$.address.path($.address.path().replace(/\/popup\/.+$/, ''));
					}
				);
				// creates Popup objects for each popup div
				$('.popup').each(function() {
					var id = this.id;
					var popup = new Popup(this.id);
					Blacktrend.popup.popups[this.id] = popup;
					myJavascriptObject.registerHotspot(this.id, new myJavascriptObject.HotSpot(
						function() { $.address.path('/home/popup/'+id); }, //XXX path should be relative, if used for more than a section
						function() { Blacktrend.tooltip.show(popup.getSubtitle()); },
						function() { Blacktrend.tooltip.hide(); }
					));
				});
			});
			
			//public
			return {
				hide: function() {
					$(getGlassPane()).fadeOut('fast', function() {
						Blacktrend.popup.destroy();
					});
				},
				destroy: function() {
					$('#contents').append($('#popup_content').children());
				},
				popups: {}
			};
		})();
})(jQuery);