$(
	function(){
		onCh(1);
		$("#p1").click(
			function(){
				onCh(1)
			}
		);
		$("#p2").click(
			function(){
				onCh(2)
			}
		);
		$("#p3").click(
			function(){
				onCh(3)
			}
		);
		$("#p4").click(
			function(){
				onCh(4)
			}
		);
		$("#p5").click(
			function(){
				onCh(5)
			}
		);
	}
);


var onCh = function(i) {

	$('#p1').removeClass();
	$('#p2').removeClass();
	$('#p3').removeClass();
	$('#p4').removeClass();
	$('#p5').removeClass();

	$('#introduction').css('display','none');
	$('#features').css('display','none');
	$('#specification').css('display','none');
	$('#options-accessories').css('display','none');
	$('#product-shop-list').css('display','none');

    switch (i) {
    	case 1:
    		$('#bj').text(': Introduction');
    		$('#p1').addClass('selected');
    		$('#introduction').css('display','block');
    		break;
		case 2:
			$('#bj').text(': Features');
			$('#p2').addClass('selected');
			$('#features').css('display','block');
			break;
		case 3:
			$('#bj').text(': Specification');
			$('#p3').addClass('selected');
			$('#specification').css('display','block');
			break;
		case 4:
			$('#bj').text(': Options/Accessories');
			$('#p4').addClass('selected');
			$('#options-accessories').css('display','block');
			break;
		case 5:
			$('#bj').text(': Shoplist');
			$('#p5').addClass('selected');
			$('#product-shop-list').css('display','block');
			break;
    }
}

/*
$(
	function(){
		onCh1(1);
		$("#sp1").click(
			function(){
				onCh1(1)
			}
		);
		$("#sp2").click(
			function(){
				onCh1(2)
			}
		);
		$("#sp3").click(
			function(){
				onCh1(3)
			}
		);
		$("#sp4").click(
			function(){
				onCh1(4)
			}
		);
	}
);
var onCh1 = function(i) {

	$('#sp1').removeClass();
	$('#sp2').removeClass();
	$('#sp3').removeClass();
	$('#sp4').removeClass();

	$('#specification-content01').css('display','none');
	$('#specification-content02').css('display','none');
	$('#specification-content03').css('display','none');
	$('#specification-content04').css('display','none');

    switch (i) {
    	case 1:
    		$('#sp1').addClass('selected');
    		$('#specification-content01').css('display','block');
    		break;
		case 2:
			$('#sp2').addClass('selected');
			$('#specification-content02').css('display','block');
			break;
		case 3:
			$('#sp3').addClass('selected');
			$('#specification-content03').css('display','block');
			break;
		case 4:
			$('#sp4').addClass('selected');
			$('#specification-content04').css('display','block');
			break;
    }
}
*/

$(
	function(){
		onCh1(1);
		$("#sl1").click(
			function(){
				onCh1(1)
			}
		);
		$("#sl2").click(
			function(){
				onCh1(2)
			}
		);
		$("#sl3").click(
			function(){
				onCh1(3)
			}
		);
		$("#sl4").click(
			function(){
				onCh1(4)
			}
		);
		$("#sl5").click(
			function(){
				onCh1(5)
			}
		);
		$("#sl6").click(
			function(){
				onCh1(6)
			}
		);
		$("#sl7").click(
			function(){
				onCh1(7)
			}
		);
		$("#sl8").click(
			function(){
				onCh1(8)
			}
		);
		$("#sl9").click(
			function(){
				onCh1(9)
			}
		);
		$("#sl10").click(
			function(){
				onCh1(10)
			}
		);
	}
);
var onCh1 = function(i) {

	$('#sl1').removeClass();
	$('#sl2').removeClass();
	$('#sl3').removeClass();
	$('#sl4').removeClass();
	$('#sl5').removeClass();
	$('#sl6').removeClass();
	$('#sl7').removeClass();
	$('#sl8').removeClass();
	$('#sl9').removeClass();
	$('#sl10').removeClass();

	$('#shop-list-content01').css('display','none');
	$('#shop-list-content02').css('display','none');
	$('#shop-list-content03').css('display','none');
	$('#shop-list-content04').css('display','none');
	$('#shop-list-content05').css('display','none');
	$('#shop-list-content06').css('display','none');
	$('#shop-list-content07').css('display','none');
	$('#shop-list-content08').css('display','none');
	$('#shop-list-content09').css('display','none');
	$('#shop-list-content10').css('display','none');

    switch (i) {
    	case 1:
    		$('#sl1').addClass('selected');
    		$('#shop-list-content01').css('display','block');
    		break;
		case 2:
			$('#sl2').addClass('selected');
			$('#shop-list-content02').css('display','block');
			break;
		case 3:
			$('#sl3').addClass('selected');
			$('#shop-list-content03').css('display','block');
			break;
		case 4:
			$('#sl4').addClass('selected');
			$('#shop-list-content04').css('display','block');
			break;
		case 5:
			$('#sl5').addClass('selected');
			$('#shop-list-content05').css('display','block');
			break;
		case 6:
			$('#sl6').addClass('selected');
			$('#shop-list-content06').css('display','block');
			break;
		case 7:
			$('#sl7').addClass('selected');
			$('#shop-list-content07').css('display','block');
			break;
		case 8:
			$('#sl8').addClass('selected');
			$('#shop-list-content08').css('display','block');
			break;
		case 9:
			$('#sl9').addClass('selected');
			$('#shop-list-content09').css('display','block');
			break;
		case 10:
			$('#sl10').addClass('selected');
			$('#shop-list-content10').css('display','block');
			break;
    }
}
/*

<li id="p1" class="selected">
<a href="#introduction-anchor" onclick="onCh(1)">Introduction</a></li>
<li id="p2"><a href="#feature-anchor" onclick="$('#bj').text(':Features')">Features</a></li>
<li id="p3"><a href="#specification-anchor" onclick="$('#bj').text(':Specification')">Specification</a></li>
<li id="p4"><a href="#options-accessories-anchor" onclick="$('#bj').text(':Options/Accessories')">Options/Accessories</a></li>

*/