adhiprabawa · January 7, 2014 08:26
diff --git a/home.html b/home.html
 <html>
 	<head>
 		<title>E-Directory Listing</title>
 		<!-- <link href="css/bootstrap.css" rel="stylesheet"> -->
 		<link href="css/style.css" rel="stylesheet">
 		<!-- <link href="css/simpletextrotator.css" rel="stylesheet"> -->
 		<link href="css/flip.css" rel="stylesheet">

 		<script src="/js/jquery-1.10.2.min.js"></script>
 		<script src="/socket.io/socket.io.js"></script>

 		<!--
 		<script type="text/javascript" src="/js/jquery.simple-text-rotator.js"></script>
 		<script type="text/javascript" src="/js/jquery.flip.js"></script>
 		<script type="text/javascript" src="/js/jquery.flip.min.js"></script>
 		-->

 		<!-- Add fancyBox main JS and CSS files -->
 		<script type="text/javascript" src="/js/jquery.fancybox.js"></script>
 		<link rel="stylesheet" type="text/css" href="/js/jquery.fancybox.css" media="screen" />

 		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

 		<script>
 			var config = {
 				//splitter : 10,
 				// url : 'http://192.168.43.214:3000'
 				url : 'http://192.168.1.109:3000'
 			}

 			var box = true, cmp = Array(), split = 5, per_page = split * 2, current = 0;
 			var loop = true;

 			$.ajax({
 				url : './contents/companies.json',
 				async : false,
 				dataType : 'json',
 				success : function(data) {
 					$.each(data, function(k, v) {

 						cmp.push(v);
 						//console.log(v);
 					});
 				}
 			});

 			var limitation = (cmp.length / per_page);

 			//console.log(limitation);

 			/*
 			 * configuration for fancybox
 			 */
 			$(".fancybox").fancybox({
 				padding : 0,
 				margin : 0,
 				autoSize : false,
 				width : '50%',
 				height : '50%',
 				openEffect : 'elastic',
 				openSpeed : 500
 			});

 			function html() {
 				$("#cmp").html("");
 				var curr_page = current * per_page;
 				// 0 * 12 =0
 				var push_page = curr_page + split;
 				// 0 + 6 = 6
 				//console.log(curr_page);
 				//console.log(push_page);
 				for ( i = curr_page; i < push_page; i++) {// i=0 i<6
 					var j = i + split;
 					//0 + 6
 					var flip = cmp[i].name;
 					var flop = cmp[j].name;
 					console.log(i);
 					console.log(j);

 					/* Fancy Box Link
 					 * http://jsfiddle.net/fUKKc/'
 					 * http://fancyapps.com/fancybox/
 					 */

 					var html = '<div class="cube"><div class="fancybox" href="#detail-company"><div class="flippety" onclick="dump()"><h3>' 
 					+ flip + '</h3></div></div><div class="fancybox" href="#detail-company"><div class="flop" onclick="dump()"><h3>' 
 					+ flop + '</h3></div></div></div>';
 					$("#cmp").append(html);

 				}

 				cube();
 			}

 			/*
 			 function tes(){
 			 alert("test");
 			 }

 			 function tesb(){
 			 alert("ini test flop");
 			 }
 			 */

 			function cube() {
 				$(".cube").each(function(k, v) {
 					$(this).attr("id", "data" + k);
 					if (box) {
 						var deg = {
 							"-webkit-transform" : "rotateX(90deg)",
 							"transform" : "rotateX(90deg)"
 						};
 					} else {
 						var deg = {
 							"-webkit-transform" : "rotateX(0deg)",
 							"transform" : "rotateX(0deg)"
 						};
 					}
 					//console.log(box);
 					setInterval(function() {
 						setTimeout(function() {
 							$("#data" + k).css(deg);
 						}, 150 * k);
 					}, 10000);
 				});
 			}

 			function dump(title, sector) {
 				loop = false;
 				//console.log(loop);
 				//$('.flip').revertFlip();
 				$(".title-company").html(title);
 				$(".sector").html(sector);
 				//$(".maping").attr("src", "/images/" + map);
 				//$(".address").html(address);

 				setInterval(function() {
 					window.location.reload();
 				}, 5000);
 			}


 			$(document).ready(function() {
 				html();
 				setInterval(function() {
 					//console.log(current);
 					if (current < limitation - 1) {
 						current++;
 					} else {
 						current = 0;
 					}

 					html();

 					if (box) {
 						box = false;
 					} else {
 						box = true;
 					}

 				}, 10000);
 			});

 		</script>
 	</head>
 	<body>
 		<div id="cmp"></div>

 		<!--<div id="companies" class="row"></div>-->

 		<div id="detail-company" class="detail" style="display:none;">

 			<!-- <img class="maping" src="/images/location.jpg" width="600px" height="300px" /> -->

 			<div class="title-company"></div>
 			<br/>
 			<div class="sector"></div>
 			<br/>
 			Phone : +62 21 52962011
 			<br/>
 			Fax : +62 21 52962030
 			<br/>
 			Email : [email protected]
 			<br/>
 			Twitter : @astra
 		</div>

 	</body>
 </html>
	<html>
	<head>
	<title>E-Directory Listing</title>
	<!-- <link href="css/bootstrap.css" rel="stylesheet"> -->
	<link href="css/style.css" rel="stylesheet">
	<!-- <link href="css/simpletextrotator.css" rel="stylesheet"> -->
	<link href="css/flip.css" rel="stylesheet">

	<script src="/js/jquery-1.10.2.min.js"></script>
	<script src="/socket.io/socket.io.js"></script>

	<!--
	<script type="text/javascript" src="/js/jquery.simple-text-rotator.js"></script>
	<script type="text/javascript" src="/js/jquery.flip.js"></script>
	<script type="text/javascript" src="/js/jquery.flip.min.js"></script>
	-->

	<!-- Add fancyBox main JS and CSS files -->
	<script type="text/javascript" src="/js/jquery.fancybox.js"></script>
	<link rel="stylesheet" type="text/css" href="/js/jquery.fancybox.css" media="screen" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

	<script>
	var config = {
	//splitter : 10,
	// url : 'http://192.168.43.214:3000'
	url : 'http://192.168.1.109:3000'
	}

	var box = true, cmp = Array(), split = 5, per_page = split * 2, current = 0;
	var loop = true;

	$.ajax({
	url : './contents/companies.json',
	async : false,
	dataType : 'json',
	success : function(data) {
	$.each(data, function(k, v) {

	cmp.push(v);
	//console.log(v);
	});
	}
	});

	var limitation = (cmp.length / per_page);

	//console.log(limitation);

	/*
	* configuration for fancybox
	*/
	$(".fancybox").fancybox({
	padding : 0,
	margin : 0,
	autoSize : false,
	width : '50%',
	height : '50%',
	openEffect : 'elastic',
	openSpeed : 500
	});

	function html() {
	$("#cmp").html("");
	var curr_page = current * per_page;
	// 0 * 12 =0
	var push_page = curr_page + split;
	// 0 + 6 = 6
	//console.log(curr_page);
	//console.log(push_page);
	for ( i = curr_page; i < push_page; i++) {// i=0 i<6
	var j = i + split;
	//0 + 6
	var flip = cmp[i].name;
	var flop = cmp[j].name;
	console.log(i);
	console.log(j);

	/* Fancy Box Link
	* http://jsfiddle.net/fUKKc/'
	* http://fancyapps.com/fancybox/
	*/

	var html = '<div class="cube"><div class="fancybox" href="#detail-company"><div class="flippety" onclick="dump()"><h3>'
	+ flip + '</h3></div></div><div class="fancybox" href="#detail-company"><div class="flop" onclick="dump()"><h3>'
	+ flop + '</h3></div></div></div>';
	$("#cmp").append(html);

	}

	cube();
	}

	/*
	function tes(){
	alert("test");
	}

	function tesb(){
	alert("ini test flop");
	}
	*/

	function cube() {
	$(".cube").each(function(k, v) {
	$(this).attr("id", "data" + k);
	if (box) {
	var deg = {
	"-webkit-transform" : "rotateX(90deg)",
	"transform" : "rotateX(90deg)"
	};
	} else {
	var deg = {
	"-webkit-transform" : "rotateX(0deg)",
	"transform" : "rotateX(0deg)"
	};
	}
	//console.log(box);
	setInterval(function() {
	setTimeout(function() {
	$("#data" + k).css(deg);
	}, 150 * k);
	}, 10000);
	});
	}

	function dump(title, sector) {
	loop = false;
	//console.log(loop);
	//$('.flip').revertFlip();
	$(".title-company").html(title);
	$(".sector").html(sector);
	//$(".maping").attr("src", "/images/" + map);
	//$(".address").html(address);

	setInterval(function() {
	window.location.reload();
	}, 5000);
	}


	$(document).ready(function() {
	html();
	setInterval(function() {
	//console.log(current);
	if (current < limitation - 1) {
	current++;
	} else {
	current = 0;
	}

	html();

	if (box) {
	box = false;
	} else {
	box = true;
	}

	}, 10000);
	});

	</script>
	</head>
	<body>
	<div id="cmp"></div>

	<!--<div id="companies" class="row"></div>-->

	<div id="detail-company" class="detail" style="display:none;">

	<!-- <img class="maping" src="/images/location.jpg" width="600px" height="300px" /> -->

	<div class="title-company"></div>
	<br/>
	<div class="sector"></div>
	<br/>
	Phone : +62 21 52962011
	<br/>
	Fax : +62 21 52962030
	<br/>
	Email : [email protected]
	<br/>
	Twitter : @astra
	</div>

	</body>
	</html>