// Tooltip
var sweetTitles = {
	x : 10,								
	y : 20,								
	tipElements : "a",	    			
	init : function() {
		$(this.tipElements).mouseover(function(e){
            if(this.className == "navlink")
                return;
			this.myTitle = this.title;
			this.myHref = this.href;
			this.myHref = (this.myHref.length > 40 ? this.myHref.toString().substring(0,40)+"..." : this.myHref);       // url 超过 40 个字符的部分用 ... 代替
			this.title = "";
			var tooltip = "<div class=\"tooltip\"><div class=\"tiptitle\">"+this.myTitle+"</div><div class=\"tiphref\">"+this.myHref+"</div>"+"</div>";
			$('body').append(tooltip);
			$('.tooltip')
				.css({
					"opacity":"0.8",                   // 0.8 为透明度可自行根据喜好调整数字
					"top":(e.pageY+20)+"px",
					"left":(e.pageX+10)+"px"
				}).show('fast');	
		}).mouseout(function(){
			this.title = this.myTitle;
			$('.tooltip').remove();
		}).mousemove(function(e){
			$('.tooltip')
			.css({
				"top":(e.pageY+20)+"px",
				"left":(e.pageX+10)+"px"
			});
		});
	}
};


$(function()
  {
      // Rolling effect
      var ArtWrapper = $("div#ArtWrapper");

      var BtnHome = $("li#TabHome > a");
      var BtnAbout = $("li#TabAbout > a");
      var BtnProg = $("li#TabProg > a");

      var Articles = $("div.Article");

      var HeightHome = $("div#ArtHome").outerHeight(true);
      var HeightAbout = $("div#ArtAbout").outerHeight(true);
      var HeightProg = $("div#ArtProg").outerHeight(true);

      var CurrentArt = "home";

      ArtWrapper.height(HeightHome);
      BtnHome.css("background-image", 'url("img/home-select.png")');

      var resetBg = function()
      {
          BtnHome.css("background-image", 'url("img/home-normal.png")');
          BtnAbout.css("background-image", 'url("img/about-normal.png")');
          BtnProg.css("background-image", 'url("img/prog-normal.png")');
      };

      BtnHome.click(
          function()
          {
              resetBg();
              Articles.animate({top: 0}, "slow");
              ArtWrapper.animate({height: HeightHome}, "slow");
              BtnHome.css("background-image", 'url("img/home-select.png")');
              CurrentArt = "home";
          });
      BtnHome.hover(
          function()
          {
              BtnHome.css("background-image", 'url("img/home-select.png")');
          },function()
          {
              if(CurrentArt != "home")
                  BtnHome.css("background-image", 'url("img/home-normal.png")');
          });

      BtnAbout.click(
          function()
          {
              resetBg();
              Articles.animate({top: -HeightHome}, "slow");
              ArtWrapper.animate({height: HeightAbout}, "slow");
              BtnAbout.css("background-image", 'url("img/about-select.png")');
              CurrentArt = "about";
          });
      BtnAbout.hover(
          function()
          {
              BtnAbout.css("background-image", 'url("img/about-select.png")');
          },function()
          {
              if(CurrentArt != "about")
                  BtnAbout.css("background-image", 'url("img/about-normal.png")');
          });

      BtnProg.click(
          function()
          {
              resetBg();
              Articles.animate({top: -(HeightHome + HeightAbout)}, "slow");
              ArtWrapper.animate({height: HeightProg}, "slow");
              BtnProg.css("background-image", 'url("img/prog-select.png")');
              CurrentArt = "prog";
          });
      BtnProg.hover(
          function()
          {
              BtnProg.css("background-image", 'url("img/prog-select.png")');
          },function()
          {
              if(CurrentArt != "prog")
                  BtnProg.css("background-image", 'url("img/prog-normal.png")');
          });

      // Tooltip
      sweetTitles.init();
  });