function init() {
    //set default moving effect
    jQuery.easing.def = "easeOutCirc";

    // blur all articles
	// add dropshadow to labels
	if ($("#articles") != null) {
 /*   	$(".article").animate({opacity: 0.7}, 100, "swing");
    	$(".article .articleimg").animate({opacity: 0.8}, 100, "swing");
    	$(".article .label").animate({opacity: 0.8}, 100, "swing");
*/		$(".article .label").dropShadow();
	}

    // set fadein and fadeout event to .article
	// and change mouse cursor
	if ($(".article") != null) {
    	$(".article").hover(
        	function () { // when in
            	/*$(this).animate({opacity: 1}, 100, "swing");
            	$(this).children(".label").animate({opacity: 1}, 100, "swing");*/
				$(this).css("cursor", "pointer");
        	},
        	function () { // when out
           		/*$(this).animate({opacity: 0.7}, 100, "swing");
           		$(this).children(".label").animate({opacity: 0.8}, 100, "swing");*/
				$(this).css("cursor", "default");
        	}
		);
	}

	// mouse cursor action to newsitem
	// and dropshadow
	if ($(".newsitem") != null) {
		$(".newsitem").hover (
			function () { // when in
				$(this).css("cursor", "pointer");
			},
			function () {
				$(this).css("cursor", "default");
			}
		);
	}

	// a random newsitem is shown wide
	if ($("newsitem") != null) {
		theItem = Math.floor(Math.random()*4+1); // random number 1 ~ 4
		pos = new Array(4);
		p = 0;
		for (i = 0; i < 4; i++) {
			pos[i] = p;
			if (i == theItem) {
				p += 450;
			} else {
				p += 100;
			}
		}
		showNews(pos[0], pos[1], pos[2], pos[3]);
	}

    // big navi appears when mouse is on navi
	// mini logo appears when mouse is on navi
	$("#navi > li").each(
        function(i, elem){
            var bottom = 0;
            $(elem).hover(
                function() {
					$(elem).css("background-image", "url('http://topics.yoikotonet.com/wp-content/themes/yoikotonet/images/logomini.png')");
                    focusNavi(i);
                },
                function () {
                    unfocusNavi(i);
					$(elem).css("background-image", "none");
                }
            )
        });
    $("#navi").hover(
        function() {
             $("#bignavi").animate({bottom: "0%"}, 1000, "linear");
		},
        function() {
            $("#bignavi").animate({bottom: "110%"}, 1000, "linear");
        });
        
}


function focusNavi(i) {
    document.getElementById("bignavi").getElementsByTagName("li").item(i).style.color = "white";
    document.getElementById("bignavi").getElementsByTagName("li").item(i).style.backgroundColor = "black";
    //document.getElementById("bignavi").getElementsByTagName("li").item(item).getElementsByTagName("a").item(0).style.color = "white";
    //document.getElementById("bignavi").getElementsByTagName("li").item(item).getElementsByTagName("a").item(0).style.backgroundColor = "black";
}

function unfocusNavi(i) {
    document.getElementById("bignavi").getElementsByTagName("li").item(i).style.color = "black";
    document.getElementById("bignavi").getElementsByTagName("li").item(i).style.backgroundColor = "transparent";
}

function showNews(x1, x2, x3, x4){
    $("#news1").animate({left: x1 + "px"}, 1000, "swing");
    $("#news2").animate({left: x2 + "px"}, 1000, "swing");
    $("#news3").animate({left: x3 + "px"}, 1000, "swing");
    $("#news4").animate({left: x4 + "px"}, 1000, "swing");
    
}

// jump to the url with new window open
function o(url) {
	window.open(url);
	return false;
}