//navigation 
function showNav(id){
	$('#' + id + ' > ul > li').hover(function(){
		$(this).addClass('active');
	},function(){
		$(this).removeClass('active');
	})
}

//home page slid
function slid(id){
	var $dt = $('#'+id+' > dt');
	var $dd = $('#'+id+' > dd');
	var $width = $('#'+id).innerWidth();
	var $index = $dt.index($('dt.on'));	
	var interval_id;
	var loop = function(){		
		$index++;		
		if($index == $dt.length){
			$index = 0;
		};
		move();
	};
	var move = function(){
		if($dd.is(':animated')) return;
		$dt.removeClass('on').eq($index).addClass('on');
		$dd.eq($index).css({opacity:0,left:0}).addClass('on').animate({opacity:'1'},1000,function(){
			$(this).removeClass('on');
			$dd.not(this).css('left',$width);
		})
	};
	$('#' + id).hover(function(){
		clearInterval(interval_id);
	},function(){
		interval_id = setInterval(loop,5000)
	});
	$dt.bind('click',function(){
		$index =$dt.index($(this));
		move();
	})
	interval_id = setInterval(loop,5000)
}

//tooltip
function showTip(elem){
	$(elem).bind({mouseover:function(){
		this.Alt = this.alt;
		this.alt = '';
		$('<div class="tooltip"><p>' + this.Alt + '</p></div>').appendTo('body')
	},mousemove:function(e){
		$('.tooltip').css({top:e.pageY + 10,left:e.pageX + 20})
	},mouseout:function(){
		$('.tooltip').remove()
		this.alt = this.Alt;
	}})
}

//run
$(function(){
	showNav('navigation');
	slid('img-slid');
	showTip('.tp')
})