/*!
 *  *
 * Release: 2011
 */


 var UI = (function(){
    var oUI = {
    	_AJAXUrl : '',
    	_AJAXloading : false,
    	_AJAXAnimationDirection : 'left',
    	searchTimeout : null,
    	isHistoryChange : false,
    	
        init : function(){
        	var oThis = this;
        	
        	this.checkHash();
        	
        	$('#header').attr('style','position:relative;top:-100px').animate(
        		{top:'0'},
        		{duration: 500}
        	);
        	
        	$('.side-nav-left').click(function(){
        		oThis.arrowPageHop('left');
            });
            
            $('.side-nav-right').click(function(){
            	oThis.arrowPageHop('right');
            });
            
            this.initAnimations();
            //AJAX URL loading
            this.initAjaxURLs();
        },
        
        checkHash : function(){
        	if(!window.location.hash) return false;
        	
        	var h = window.location.hash;
        	if(h[0]+h[1] != '#!') return false;
        	
        	var hash = this.getHash();
        	
        	if(hash){
        		this.changeURL(hash);
        	}
        },
        
        getHash : function(){
        	var parts = window.location.hash.split('#!');
        	return parts[1];
        },
        
        initAjaxURLs : function(){
        	var oThis = this;
            $('a:not(.external)').live('click',function(){
            	var href = $(this).attr('href');
            	oThis.determineAnimationDirection(href);
            	oThis.changeURL(href);
            	return false;
            });
        },
        
        initAnimations : function(){
        	var oThis = this;
        	//team member desc animation
            $('.person .image .desc').removeClass('active');
            $('.person .image').hover(function(){
            	$(this).find('.desc').slideDown();
            },function(){
            	$(this).find('.desc').slideUp();
            });
            
            //Project detail animations
            //timeline thumb fading
            $('#project-detail').hover(function(){
            	$('.timeline .offset-wrapper').fadeOut();
            },function(){
            	if($('.timeline .offset-wrapper .title').html()!=''){
            		$('.timeline .offset-wrapper').fadeIn();
            	}
            });
            
            //Project gallery hover
            $('#project-detail .gallery').hover(function(){
            	$('#project-detail .gallery a').animate({'margin-right':'6px'},200);
            	$('#project-detail .desc, #project-detail .client, #project-detail .tech, h1').stop().fadeTo(200, 0);
            	//$('#project-detail .desc, #project-detail .client, #project-detail .tech, h1').hide();
            },function(){
            	$('#project-detail .gallery a').animate({'margin-right':'-80px'},200);
            	$('#project-detail .desc, #project-detail .client, #project-detail .tech, h1').stop().fadeTo(200, 1);
            	//$('#project-detail .desc, #project-detail .client, #project-detail .tech, h1').show();
            });
            
            //Project
            $('#project-detail .gallery a').click(function(){
            	$('#project-detail .image img').attr('src',$(this).attr('href'));
            	return false;
            });
            
            //iPhone tapper
            $('#tapper').click(function(){
            	if($('#drawer').css('height')=='40px'){
            		$('#drawer').animate({height:'230px'},{duration:250});
            	}else{
            		$('#drawer').animate({height:'40px'},{duration:250});
            	}
            });
            
            
            $('#menu a.facebook, #facebook-pagelike').hover(function(){
            	$('#facebook-pagelike').stop().fadeTo(200, 1);
            },function(){
            	$('#facebook-pagelike').stop().fadeTo(200, 0);
            });
            
            
            $('#search-field').hover(function(){
            	clearTimeout(UI.searchTimeout);
            	$(this).find('.input-wrapper').stop().fadeTo(200, 1);
            },function(){
            	var jThis = this;
            	if(!$('#searchfield').is(":focus")){
	            	UI.searchTimeout = setTimeout(function(){
	            		$(jThis).find('.input-wrapper').stop().fadeTo(200, 0);
	            	},2000);
            	}
            });
            $('#searchfield').focus(function(){
            	clearTimeout(UI.searchTimeout);
            }).blur(function(){
            	UI.searchTimeout = setTimeout(function(){
            		$('#search-field .input-wrapper').stop().fadeTo(200, 0);
            	},2000);
            });
            
            
            $('.timeline .point').mouseover(function(){
            	$('#projects-list .do-it').fadeOut();
            	$('.timeline .offset-wrapper').show();
            	$('.timeline .thumb .t2 span').html($(this).data('finished'));
            	$('.timeline .thumb .title').html($(this).attr('title'));
            	$('.timeline .offset-wrapper').css('left',$(this).css('left'));
            	$('.timeline .thumb a').attr('href',$(this).attr('href'));
            	$('.timeline .thumb img').attr('src',$(this).data('imgsrc'));
            });
        },
        
        arrowSubpageHop : function(direction){
        	var nextHop = null;
        	if(direction=='down'){
        		nextHop = $('.paging-next').attr('href');
        		if(!nextHop){
        			nextHop = $('.client-detail-footer .client-thumb.active').prev().find('a').attr('href');
        		}
        		if(!nextHop){
        			nextHop = $('#projects-top-years a.active').prev().prev().attr('href');
        		}
        		if(!nextHop){
        			nextHop = $(".timeline a.active").prev().attr('href');
        		}
        		this._AJAXAnimationDirection = "bottom";
        	}else{
        		nextHop = $('.paging-prev').attr('href');
        		if(!nextHop){
        			nextHop = $('.client-detail-footer .client-thumb.active').next().find('a').attr('href');
        		}
        		if(!nextHop){
        			nextHop = $('#projects-top-years a.active').next().next().attr('href');
        		}
        		if(!nextHop){
        			nextHop = $(".timeline a.active").next().attr('href');
        		}
        		
        		this._AJAXAnimationDirection = "top";
        	}
        	
        	if(nextHop){
        		UI.changeURL(nextHop);
        	}
        },
        
        arrowPageHop : function(direction){
        	var modifier = function(i){return i+1};
        	this._AJAXAnimationDirection = "right";
        	if(direction=='left'){
        		var modifier = function(i){return i-1};
        		this._AJAXAnimationDirection = "left";
        	}
        	var parts = window.location.pathname.split('/');
        	if(this._AJAXUrl){
        		parts = this._AJAXUrl.split('/');
        	}
        	var url = (parts[1]) ? '/'+parts[1]+'/' : '/';

        	var nextHop = null;
        	var i = 0;
        	$('#menu a').each(function(){
        		if($(this).attr('href') == url){
        			var order = modifier(i);
        			nextHop = $('#menu a:eq('+ order +'):not(".facebook")').attr('href');
        			return false;
        		}
        		i++;
        	});
        	
        	if(nextHop){
        		UI.changeURL(nextHop);
        	}
        },
        
        getResponse : function(d,f,url){
			var oThis = this;
			d = JSON.stringify(d);
			$.ajax({
				data: 'data='+d+'&action='+f,
				url: "/~JSON"+url,
				success: function(data){
					oThis._AJAXloading = false;
					oThis.displayContent(data);			
				},
				beforeSend: function(){
					oThis._AJAXloading = true;
					oThis.ajaxLoadingAnimation();
				},
				error: function(){
					oThis._AJAXloading = false;
				}
			});
		},
		
		ajaxLoadingAnimation : function(){
			var oThis = this;
			$('#header img').fadeTo(500, 0.2,function(){
				$('#header img').fadeTo(500, 1,function(){
					 if(oThis._AJAXloading){
						 UI.ajaxLoadingAnimation();
					 }
				});
			});
		},
		
		displayContent : function(data){
			var oThis = this;
			//update document title
			document.title = data.meta.title;
			
			//animate clients differently
			if(data.page.template=="client-detail.tpl"){
				// Fade variant
				$('.content').removeClass('rel');
				$('.content').fadeOut(400,function(){
					$(this).html(data.templateOutput).fadeIn(400);
					$('a:external').addClass('external');
					oThis.initAnimations();
				});
			}else{
				//Slide variant
				var set = this.getPageChangeAnimationSettings()
				$('.content').addClass('rel');
				$('.content').animate(set.pre, {
				    duration: 500,
				    complete: function() {
				    	$(this).css(set.start).html(data.templateOutput).animate(set.finish,{duration:500});
				    	$('a:external').addClass('external');
				    	oThis.initAnimations();
				    }
				});
			}
		},
		
		determineAnimationDirection : function(href){
			var oThis = this;
			var parts = href.split('/');
			
			oThis._AJAXAnimationDirection = "top"; 
			if(!parts[1]){
				this._AJAXAnimationDirection = "left";
				return;
			}
			
			if(!parts[2]){//menu items
				$('#menu a').each(function(){
					if($(this).attr('href') == href) {
						oThis._AJAXAnimationDirection = "right";
						return;
					}
					if($(this).attr('href') == oThis._AJAXUrl) {
						oThis._AJAXAnimationDirection = "left";
						return;
					}
				});
			}else{//second level items
				//TODO
				if($(".timeline a.point")[0]){
					$(".timeline a.point").each(function(){
						if($(this).attr('href') == href) {
							oThis._AJAXAnimationDirection = "right";
							return;
						}
						if($(this).attr('href') == oThis._AJAXUrl) {
							oThis._AJAXAnimationDirection = "left";
							return;
						}
					});
				}
			}
			
			
        	//var first = parts[1];
		},
		
		getPageChangeAnimationSettings : function(){
			var start, finish, pre = null;
	    	switch (this._AJAXAnimationDirection) {
	    	case "left":
	    		pre =  {left: '2000px'};
				start = {left: '-2000px'};
				finish = {left: '0px'};
				break;
	    	case "right":
	    		pre =  {left: '-2000px'};
				start = {left: '2000px'};
				finish = {left: '0px'};
				break;
	    	case "top":
	    		pre =  {top: '2000px'};
				start = {top: '-2000px'};
				finish = {top: '0px'};
				break;
	    	case "bottom":
	    		pre =  {top: '-2000px'};
				start = {top: '2000px'};
				finish = {top: '0px'};
				break;
			}
	    	return {pre: pre,start: start,finish: finish};
		},
        
        changeURL : function(url){
        	if(!url) return false;
        	//window.location = url;
        	this.getResponse(null, null, url);
        	
        	this.isHistoryChange = false;
        	window.location.hash = '#!' + url;
        	this._AJAXUrl = url;
        	
        	var parts = url.split('/');
        	var first = parts[1];
        	
        	$('#menu a').removeClass('active');
        	if(first){
        		$('#menu a[href="/' + first + '/"]').addClass('active');
        	}else{
        		$('#menu a[href="/"]').addClass('active');
        	}
        	
        }
		
    }
    return oUI;
})();