function ex1(){
	$('#mydiv1').mouseover(function(){
		$(this).attr('class', 'over');
	});
	$('#mydiv1').mouseout(function(){
		$(this).attr('class', 'out');
	});
}

function ex2(){
	$('#mydiv2')
	.mouseover(function(){
		$(this).attr('class', 'over');
	})
	.mouseout(function(){
		$(this).attr('class', 'out');
	});
}

function ex3(){
	$('#ex3_btn1').click(function(){
		$('#mydiv3').animate({marginLeft:0}, 500, "swing");
	});
	$('#ex3_btn2')
	.bind('click', {mystr:'hello mybtn'},function(e){
		trace(e.data.mystr);
		$('#mydiv3').animate({marginLeft:200}, 500, "swing");
	});
}

/* ex4 */
var currentMenu = 1;

function activateMenu(menuNo, isActive){
	var menu = $('#ex4_menu' + menuNo);
	if(isActive){
		menu.attr('class', 'active');
	}else{
		menu.attr('class', '');
	}
}

function ex4(){
	for(var i = 0; i < 3; i++){
		var _no = i + 1;
		$('#ex4_menu' + _no)
		.bind('mouseover', {no: _no}, function(e){
			if(currentMenu != e.data.no){
				activateMenu(e.data.no, true);
			}
		})
		.bind('mouseout', {no: _no}, function(e){
			if(currentMenu != e.data.no){
				activateMenu(e.data.no, false);
			}
		})
		.bind('click', {no: _no}, function(e){

			//古いものは元に戻す
			activateMenu(currentMenu, false);
			
			//新しいものに設定
			currentMenu = e.data.no;
			activateMenu(currentMenu, true);
			$('#ex4_content_wrapper')
			.stop()
			.animate({marginLeft:(currentMenu - 1) * -895 + 'px'}, 10, "linear");
		});
	}
	//初期化
	activateMenu(currentMenu, true);
}

$(function(){
	ex1();
	ex2();
	ex3();
	ex4();
});

/* -----------------------------
 utility
----------------------------- */
function trace(s){
	var logstr = '';
	if(typeof(s) == 'object'){
		for(var i in s){
			logstr += i + ' : ' + s[i] + '\r\n';
		}
	}else{
		logstr = s;
	}
	console.log(logstr);
};