(function(){
	// Check namespace open
	if(typeof(window.claw)=='undefined'){
		window.claw = {};
	}
	var claw = window.claw;
	
	claw.navigation = (function(){
		var link = function(){
			return{
				elem: false,
				img: false,
				fadeIn: function(){
					this.img.stop().fadeTo("fast",1);
				},
				fadeOut: function(){
					this.img.stop().fadeTo("fast",0);
				},
				build: function(src){
					var img = $('<img src="'+src+'" />');		
					img.css("opacity",0).css("position","absolute").css("top",0).css("left",0);
					return img;
				},
				config: function(elem){
					var that = this;
					elem.css("position","relative").mouseover(function(){
						that.fadeIn();
						$(this).one("mouseleave",function(){
							that.fadeOut();
						});
					});	
					return elem;				
				},
				init: function(elem,src){
					this.elem = this.config(elem);
					this.img = this.build(src);
					this.elem.append(this.img);
					return this;
				}
			};
		};
		return {
			link: function(elem,src){
				return new link().init(elem,src);
			}
		};
	})();
	
	claw.modal = (function(){
		var modal = {
			modal: $('<div id="claw-modal"></div>'),
			overlay: $('<div id="claw-overlay"></div>'),
			header: $('<div class="cl_modal_header"><span class="cl_title">Modal Title</span><a class="cl_close_btn" href="javascript:void(0);">Close</a></div>'),
			body: $('<div class="cl_modal_body"></div>'),	
			cache: {
				modal: {
					width: 0,
					height: 0,
					top: 0,
					left: 0
				},
				window: {
					width: 0,
					height: 0,
					scrolltop: 0,
					scrollleft: 0
				},
				overlay: {
					width: 0,
					height: 0,
					top: 0,
					left: 0
				},
				modalStatus: {
					open: false,
					inited: false
				}
			},
			open: function(content,title){
				this.insertContent(content,title);
				this.startChecking();
				this.overlay.css("display","block").fadeTo("slow",0.75);
				this.modal.css("display","block").fadeTo("slow",1);
			},
			startChecking: function(){
				var that = this;
				this.cache.modal = this.collectElemAttrs("modal");
				this.interval = setInterval(function(){
					that.checkPositionUpdates();
				},50);
			},
			stopChecking: function(){
				clearInterval(this.interval);
				this.interval = null;
			},
			checkPositionUpdates: function(){
				if(this.hasChanged("modal")){
					this.positionElem("modal",this.cache.window,this.cache.modal);
				}
				if(this.hasChanged("window")){
					this.positionElem("modal",this.cache.window,this.cache.modal);	
					this.positionElem("overlay",this.cache.window);			
				}
			},
			hasChanged: function(elemName){
				var cacheBranch,hasChanged = false,elemAttrs = this.collectElemAttrs(elemName);
				switch(elemName){
					case "modal":
						cacheBranch = this.cache.modal;
					break;
					case "overlay":
						cacheBranch = this.cache.overlay;
					break;
					case "window":
						cacheBranch = this.cache.window;
					break;
				}	
				for(var x in elemAttrs){
					if(elemAttrs[x]!=cacheBranch[x]){
						cacheBranch[x] = elemAttrs[x];
						hasChanged = true;
					}
				}
				return hasChanged;						
			},
			positionElem: function(elemName,windowAttrs,modalAttrs){
				switch(elemName){
					case "modal":
						this.modal
							.css("left",windowAttrs.scrollleft+(windowAttrs.width/2)-(modalAttrs.width/2))
							.css("top",windowAttrs.scrolltop+(windowAttrs.height/2)-(modalAttrs.height/2));
					break;
					case "overlay":
						this.overlay
							.css("left",windowAttrs.scrollleft)
							.css("top",windowAttrs.scrolltop)
							.css("width",windowAttrs.width)
							.css("height",windowAttrs.height);					
					break;
				}
			},
			collectElemAttrs: function(elemName){
				switch(elemName){
					case "modal":
						return {
							width: this.modal.outerWidth(),
							height: this.modal.outerHeight(),
							top: this.modal.offset().top,
							left: this.modal.offset().left
						};
					break;
					case "overlay":
						return {
							width: this.overlay.width(),
							height: this.overlay.height(),
							top: this.overlay.offset().top,
							left: this.overlay.offset().left
						};			
					break;
					case "window":
						return {
							width: $(window).width(),
							height: $(window).height(),
							scrolltop: $(window).scrollTop(),
							scrollleft: $(window).scrollLeft()
						};		
					break;
				}
			},
			close: function(){
				var that = this;
				this.overlay.fadeTo("slow",0,function(){
					$(this).css("display","none");
				});
				this.modal.fadeTo("slow",0,function(){
					$(this).css("display","none");
					that.clearContent();
				});
				
			},
			clearContent: function(){
				this.body.html("");
				$(".cl_title",this.header).text("");
			},
			insertContent: function(content,title){
				this.body.html(content);
				$(".cl_title",this.header).text(title);
			},
			init: function(){
				$("body").append(this.overlay).append(this.modal);
				this.modal.append(this.header).append(this.body);
				this.overlay
					.css("position","absolute")
					.css("opacity",0)
					.css("display","none");
				this.modal
					.css("position","absolute")
					.css("opacity",0)
					.css("display","none");
				this.cache.modalStatus.inited = true;
				var that = this;
				this.overlay.bind("click",function(){
					that.close();
				});
				$("a.cl_close_btn",this.header).bind("click",function(){
					that.close();
				});
			}
			
		};
		
		return {
			modal: modal,
			trigger: function(elem,content,title){
				$(elem).click(function(){
					if(!modal.cache.modalStatus.inited){
						modal.init();
					}
					modal.open(content,title);
				});
			}
		}
	})();
	
})();