var Site = {
	run: function() {
		this.PrimaryLinks.run();
		this.FooterLinks.run();
		this.fix_png();
		this.is_ie6() && this.fix_page_header();
	},
	
	fix_png: function(elm, type) {
		if (typeof DD_belatedPNG !== 'undefined') {
			$(elm || '.png-image').each(function() {
				DD_belatedPNG.fixPng(this, type);
			});
		}
	},
	
	fix_page_header: function() {
		var div = $('.page-header');
		var win = $(window);
		var top = div.offset().top;
		win.scroll(function() {
			div.stop().animate({
				top: (top + win.scrollTop()) + 'px'
			}, 2000);
		});
	},
	
	is_ie6: function() {
		return !!window.ActiveXObject && !window.XMLHttpRequest;
	},
	
	is_ie: function() {
		return !!window.ActiveXObject;
	}
};

Site.PrimaryLinks = {
	run: function() {
		this.div = $('#primary-links');
		this.lis = $('li', this.div);
		
		this.init_elms();
		this.handle_events();
	},
	
	/**
	 * set up dom element for effect.
	 */
	init_elms: function() {
		// for each li, we append two links (.img2 and .img3) that overlay original link
		this.lis.each(function() {
			var li = $(this);
			var dec2 = $('<span class="decorate decorate2" />').css('z-index', 200);
			var dec3 = $('<span class="decorate decorate3" />').css('z-index', 100);
			
			$('a', li).append(dec2).append(dec3);
		});
		
		// init selected link
		var index = $('li.selected', this.div).index() || 0;
		
		$('.decorate2', this.lis[index]).css('z-index', 100);
		$('.decorate3', this.lis[index]).css('z-index', 200);
		
		this.selected_index = this.hover_index = index;
		
		// remove link focus
		$('a', this.div).focus(function() {
			$(this).blur();
		});
	},
	
	handle_events: function() {
		var $this = this;
		
		var timer_id;
		function move_to(index) {
			timer_id && clearTimeout(timer_id);
			timer_id = setTimeout(function() {
				$this.move_to(index);
				timer_id = 0;
			}, 100);
		}
		
		$('.decorate2,.decorate3', this.div).mouseenter(function() {
			var index = $(this).closest('li').index();
			move_to(index);
		});
		
		this.div.mouseleave(function() {
			move_to($this.selected_index);
		});
	},
	
	move_to: function(index) {
		if (this.running) {
			this.cancel = true;
			this.end_index = index + 1; // set to index + 1 will make $this.run_chain simpler.;
			return;
		} 
		
		var t = index - this.hover_index;
		if (t == 0) {
			return;
		}
		
		t > 0 ? this.move_next(t) : this.move_prev(-t);
	},
	
	move_next: function(step) {
		if (this.running) {
			return;
		}
		this.running = true;
		this.cancel = false;	// we can cancel between steps
		
		var $this = this;
		
		var setup = false;
		
		var li;
		var next_li;
		
		var img2;
		var next_img3;
		
		var height2;
		var next_height3;
		
		var timer_id;
		var tip;
		
		var now = 0;
		var total_step = step;
		
		function move() {
			if (!setup) {
				setup = true;
				
				var index = $this.hover_index;
				if (step == 0 || index == $this.lis.length - 1 || $this.cancel) {
					clearInterval(timer_id);
					$this.running = false;
					
					$this.run_chain();
					
					return;
				}
				
				step--;
				
				tip = 0;
				
				li = $this.lis[index];
				next_li = $this.lis[index + 1];
				
				img2 = $('.decorate2', li);
				height2 = img2.height();
				
				img2.css({ 'height': 0, 'z-index': 200 });
				$('.decorate3', li).css('z-index', 100);
				
				next_img3 = $('.decorate3', next_li);
				next_height3 = next_img3.height();
				
				next_img3.css({ 'height': 0, 'z-index': 200 });
				$('.decorate2', next_li).css('z-index', 100);
			}
			
			var speed = $this.next_speed(now, total_step);
			tip += speed;
			now += speed;
			
			if (tip > height2 && tip > next_height3) {
				img2.css('height', height2 + 'px');
				next_img3.css('height', next_height3 + 'px');

				$this.hover_index = $this.hover_index + 1;  // prepare next link
				setup = false;
				
				return;
			}
			
			tip <= height2 && img2.css('height', tip + 'px');
			tip <= next_height3 && next_img3.css('height', tip + 'px');
		}
		
		timer_id = setInterval(move, 13);
	},
	
	move_prev: function(step) {
		if (this.running) {
			return;
		}
		this.running = true;
		this.cancel = false;
		
		var $this = this;
		
		var setup = false;
		
		var li;
		var prev_li;
		
		var img3;
		var pre_img2;
		
		var height3;
		var height3_ori;
		
		var pre_height2;
		var pre_height2_ori;
		
		var timer_id;
		
		var now = 0;
		var total_step = step;
		
		function move() {
			if (!setup) {
				setup = true;
				
				var index = $this.hover_index;
				if (step == 0 || index == 0 || $this.cancel) {
					clearInterval(timer_id);
					$this.running = false;
					
					$this.run_chain();
					
					return;
				}
				
				step--;
				
				li = $this.lis[index];
				prev_li = $this.lis[index - 1];
				
				img3 = $('.decorate3', li);
				height3 = height3_ori = img3.height();
				
				pre_img2 = $('.decorate2', prev_li);
				pre_height2 = pre_height2_ori = pre_img2.height();
			}
			
			var speed = $this.next_speed(now, total_step);
			height3 -= speed;
			pre_height2 -= speed;
			now += speed;
			
			if (height3 < 0 && pre_height2 < 0) {
				img3.css({ 'z-index': 100, 'height': height3_ori + 'px' });
				$('.decorate2', li).css('z-index', 200);
				
				pre_img2.css({ 'z-index': 100, 'height': pre_height2_ori + 'px' });
				$('.decorate3', prev_li).css('z-index', 200);
				
				$this.hover_index = $this.hover_index - 1;  // prepare next link
				setup = false;
				
				return;
			}
			
			height3 >= 0 && img3.css('height', height3 + 'px');
			pre_height2 >= 0 && pre_img2.css('height', pre_height2 + 'px');
		}
		
		timer_id = setInterval(move, 13);
	},
	
	run_chain: function() {
		this.end_index && this.move_to(this.end_index - 1)
		this.end_index = false;
	},
	
	next_speed: function(now, step) {
		return 2 * step;		
//		this._li_height = this._li_height || this.lis.eq(0).height();
//		var total = step * this._li_height;
//		var p = now / total;
//		var speed = Math.sin(p * Math.PI) * step * 2;
//		return speed >  2 ? speed : 2;
	}
};

Site.FooterLinks = {
	run: function() {
		this.div = $('#footer-links');
		this.setup();
		this.tip_effect();
	},
	
	setup: function() {
		this.div.children().addClass('tip-effect').append('<div class="tip-effect-decorate" />');
	},
	
	tip_effect: function() {
		var timer_id;
		
		$('a', this.div).mouseenter(function() {
			var elm = $(this);
			var li = elm.closest('li.tip-effect');
			
			timer_id && clearTimeout(timer_id);
			timer_id = setTimeout(function() {
				var top = elm.offset().top - li.offset().top;
				var decorate = $('.tip-effect-decorate', li);
				decorate.css('height', elm.height() + 'px');			
				decorate.animate({ top: top + 'px' }, 'fast');
			}, 100);
		});
		
		$('li.tip-effect', this.div).mouseleave(function() {
			var li = $(this);
			setTimeout(function() {
				var decorate = $('.tip-effect-decorate', li);
				decorate.css('height', '');
				decorate.animate({ top: 0 }, 'fast');
			}, 100);
			
		});
	}
};

$(function() {
	Site.run();
});