<?php include "../../lib/config.php"; ?>
<?php include "../ssi/html_header.php"; ?>
<?php
$lang = 'en';
$link   = $topVar['site_path']."/ci/index.php/remote/get_content/fleet_summary/".$lang ."/bulk";
$cms_json_data   = file_get_contents($link);	
$data = json_decode($cms_json_data,true);
$remark = str_replace("\/","/",$data[0][$lang ."_content"]);

$data = explode("\n",trim(file_get_contents($topVar["site_path"]."/ci/index.php/remote/get_fleet_summary/get_data/")));

foreach($data as &$row){
    $row = explode(',', $row);
}

/* ++++++++++++++  remove the empty element from array    ++++++++++++++ */
foreach($data as $key =>$values){
  if(trim($values[0]) == ""){
	unset($data[$key]);    
  }
}
$data = array_values($data);   //re-index 

$value_1_1 = $data[0][1];
$value_1_2 = $data[0][2];
$value_1_3 = $data[0][3];

$value_2_1 = $data[1][1];
$value_2_2 = $data[1][2];
$value_2_3 = $data[1][3];

?>
<title><?php echo $companyName?></title>

<?php include "../ssi/css.php"; ?>
</head>

<style>

	@media (min-width: 768px){
		.fleetTop .title.mobile { opacity: 0; }
	}
	
</style>

<body>
<?php include "../ssi/header.php"; ?>

<?php $sBanner="fleet2"; include "../ssi/subBanner.php"; ?>

	
	<div class="mainWrapper">
		<div class="container">
			<div class="row">
				<div class="col-sm-10 col-sm-offset-1 col-lg-10 col-lg-offset-1">
					<!--<h2>PB Dry Bulk Fleet</h2>
					<h3>Average age of core fleet: 7.3 years old</h3>-->
					<div class="row">
						<div class="col-sm-2 fleetItem hidden-xs">
							<div class="row">
								<div class="col-sm-12 col-xs-6 fleetTop">
									&nbsp;
								</div>
								<div class="col-sm-12 col-xs-6 fleet">
									<div class="row">
										<div class="col-sm-12 title top">
											<span>Handysize</span>
										</div>
										<div class="col-sm-12">
											&nbsp;
										</div>
									</div>
									<div class="row">
										<div class="col-sm-12 title top">
											<span>Supramax</span>
										</div>
										<div class="col-sm-12">
											&nbsp;
										</div>
									</div>
									<!--<div class="row">
										<div class="col-sm-12 title top">
											<span>Post-Panamax</span>
										</div>
										<div class="col-sm-12">
											&nbsp;
										</div>
									</div>-->
								</div>
							</div>
						</div>
						<div class="col-sm-3 fleetItem">
							<div class="row">
								<div class="col-sm-12 col-xs-6 fleetTop owned">
									<div class="circleWrapper fadeInDiv">
										<div class="num counter-num" data-min="0" data-max="<?=$value_1_1+$value_2_1?>">0</div>
										<div class="text">Vessels<br>owned</div>
									</div>
								</div>
								<div class="col-sm-12 col-xs-6 fleet">
									<div class="row">
										<div class="fadeInDiv2">
											<div class="col-sm-12 visible-xs title"><span>Handysize</span></div>
											<div class="col-sm-12 col-xs-9 col-sm-push-0 col-xs-push-3 top">
												<img src="../images/fleet/handysize-blue.png" class="handysize-img" />
											</div>
											<div class="col-sm-12 col-xs-3 col-sm-pull-0 col-xs-pull-9">
												<?=$value_1_1?>
											</div>
										</div>
									</div>
									<div class="row">
										<div class="fadeInDiv2">
											<div class="col-sm-12 visible-xs title"><span>Supramax</span></div>
											<div class="col-sm-12 col-xs-9 col-sm-push-0 col-xs-push-3 top">
												<img src="../images/fleet/supramax-blue.png" class="supramax-img" />
											</div>
											<div class="col-sm-12 col-xs-3 col-sm-pull-0 col-xs-pull-9">
												<?=$value_2_1?>
											</div>
										</div>
									</div>
									<!--<div class="row">
										<div class="fadeInDiv2">
											<div class="col-sm-12 visible-xs title"><span>Post-Panamax</span></div>
											<div class="col-sm-12 col-xs-9 col-sm-push-0 col-xs-push-3 top">
												<img src="../images/fleet/post-panamax-blue.png" class="panamax-img" />
											</div>
											<div class="col-sm-12 col-xs-3 col-sm-pull-0 col-xs-pull-9">
												1
											</div>
										</div>
									</div>-->
								</div>
							</div>
						</div>
						<div class="col-sm-3 fleetItem">
							<div class="row">
								<div class="col-sm-12 col-xs-6 fleetTop long-term">
									<div class="circleWrapper fadeInDiv">
										<div class="num counter-num" data-min="0" data-max="<?=$value_1_2+$value_2_2?>">0</div>
										<div class="text">Long-term<br>Chartered*</div>
									</div>
								</div>
								<div class="col-sm-12 col-xs-6 fleet">
									<div class="row">
										<div class="fadeInDiv3">
											<div class="col-sm-12 visible-xs title"><span>Handysize</span></div>
											<div class="col-sm-12 col-xs-9 col-sm-push-0 col-xs-push-3 top">
												<img src="../images/fleet/handysize-lightblue.png" class="handysize-img" />
											</div>
											<div class="col-sm-12 col-xs-3 col-sm-pull-0 col-xs-pull-9">
												<?=$value_1_2?>
											</div>
										</div>
									</div>
									<div class="row">
										<div class="fadeInDiv3">
											<div class="col-sm-12 visible-xs title"><span>Supramax</span></div>
											<div class="col-sm-12 col-xs-9 col-sm-push-0 col-xs-push-3 top">
												<img src="../images/fleet/supramax-lightblue.png" class="supramax-img" />
											</div>
											<div class="col-sm-12 col-xs-3 col-sm-pull-0 col-xs-pull-9">
												<?=$value_2_2?>
											</div>
										</div>
									</div>
									<!--<div class="row">
										<div class="fadeInDiv3">
											<div class="col-sm-12 visible-xs title"><span>Post-Panamax</span></div>
											<div class="col-sm-12 col-xs-9 col-sm-push-0 col-xs-push-3 top">
												<img src="../images/fleet/post-panamax-lightblue.png" class="panamax-img" />
											</div>
											<div class="col-sm-12 col-xs-3 col-sm-pull-0 col-xs-pull-9">
												1
											</div>
										</div>
									</div>-->
								</div>
							</div>
						</div>
						<div class="col-sm-3 fleetItem">
							<div class="row">
								<div class="col-sm-12 col-xs-6 fleetTop short-term">
									<div class="circleWrapper fadeInDiv">
										<div class="num counter-num" data-min="0" data-max="<?=$value_1_3+$value_2_3?>">0</div>
										<div class="text">Short-term<br>Chartered*</div>
									</div>
								</div>
								<div class="col-sm-12 col-xs-6 fleet">
									<div class="row">
										<div class="fadeInDiv4">
											<div class="col-sm-12 visible-xs title"><span>Handysize</span></div>
											<div class="col-sm-12 col-xs-9 col-sm-push-0 col-xs-push-3 top">
												<img src="../images/fleet/handysize-darkgrey.png" class="handysize-img" />
											</div>
											<div class="col-sm-12 col-xs-3 col-sm-pull-0 col-xs-pull-9">
												<?=$value_1_3?>
											</div>
										</div>
									</div>
									<div class="row">
										<div class="fadeInDiv4">
											<div class="col-sm-12 visible-xs title"><span>Supramax</span></div>
											<div class="col-sm-12 col-xs-9 col-sm-push-0 col-xs-push-3 top">
												<img src="../images/fleet/supramax-darkgrey.png" class="supramax-img" />
											</div>
											<div class="col-sm-12 col-xs-3 col-sm-pull-0 col-xs-pull-9">
												<?=$value_2_3?>
											</div>
										</div>
									</div>
									<!--<div class="row">
										<div class="fadeInDiv4">
											<div class="col-sm-12 visible-xs title"><span>Post-Panamax</span></div>
											<div class="col-sm-12 col-xs-9 col-sm-push-0 col-xs-push-3 top">
												<img src="../images/fleet/post-panamax-darkgrey.png" class="panamax-img" />
											</div>
											<div class="col-sm-12 col-xs-3 col-sm-pull-0 col-xs-pull-9">
												0
											</div>
										</div>
									</div>-->
								</div>
							</div>
						</div>
						<div class="col-sm-1 fleetItem">
							<div class="row">
								<div class="col-sm-12 col-xs-6 fleetTop total">
									<div class="circleWrapper fadeInDiv">
										<div class="num counter-num" data-min="0" data-max="<?=$value_1_1+$value_2_1+$value_1_2+$value_2_2+$value_1_3+$value_2_3?>">0</div>
										<div class="text">Total<br>Fleet*</div>
									</div>
									<!--<div class="col-sm-12 hidden-xs"><span>&nbsp;</span></div>
									<div class="col-sm-12 title mobile fadeInDiv"><span>Total</span></div>-->
								</div>
								<div class="col-sm-12 col-xs-6 fleet">
									<div class="row">
										<div class="fadeInDiv5">
											<div class="col-sm-12 hidden-xs title top">
												<span>Total Handysize</span>
											</div>
											<div class="col-sm-12 visible-xs title"><span>Total Handysize</span></div>
											<div class="col-sm-12">
												<?=$value_1_1+$value_1_2+$value_1_3?>
											</div>
										</div>
									</div>
									<div class="row">
										<div class="fadeInDiv5">
											<div class="col-sm-12 visible-xs title"><span>Total Supramax</span></div>
											<div class="col-sm-12 hidden-xs title top">
												<span>Total Supramax</span>
											</div>
											<div class="col-sm-12">
												<?=$value_2_1+$value_2_2+$value_2_3?>
											</div>
										</div>
									</div>
									<!--<div class="row">
										<div class="fadeInDiv5">
											<div class="col-sm-12 visible-xs title"><span>Post-Panamax</span></div>
											<div class="col-sm-12 hidden-xs top">
												&nbsp;
											</div>
											<div class="col-sm-12">
												2
											</div>
										</div>
									</div>-->
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-7 remark">
							<?=$remark?>
						</div>
                        <div class="col-md-5">
                            <a class="btn btn-primary btn-lg pull-right" href="../fleet/shipmanagement.php" role="button" style="margin-bottom: 0; margin-left:10px;">Ship management, safety & quality <i class="zmdi zmdi-hc-fw"></i></a>
                        </div>
					</div>
					
				</div>
			</div>
			
            <!--
			<div class="row">
					<ul class="spotlight fleet3">
						<li class="item full">
							<div class="title">Ship management, safety & quality</div>
							<div class="info">
								<div class="heading"><!--Transparency and Accountability in a Sustainable Business- -></div>
							</div>
							<a href="../fleet/fleetmanagement.php" class="btn btn-primary" role="button">Find out more <i class="zmdi zmdi-hc-fw"></i></a>
							<div class="overlay"></div>
							<div class="bgImg spotCG"></div>
						</li>
					</ul>
			</div>
            -->
			
			<?php include "hns.php"; ?>
			
			<!--<div class="row">
					<ul class="spotlight fleet2">
						<li class="item full">
							<div class="title">Ship management, safety & quality</div>
							<div class="info">
								<div class="heading"></div>
							</div>
							<a href="../fleet/fleetmanagement.php" class="btn btn-primary" role="button">Find out more <i class="zmdi zmdi-hc-fw"></i></a>
							<div class="overlay"></div>
							<div class="bgImg spotCG"></div>
						</li>
						<li class="item">
							<div class="title">A Sustainable Business Approach</div>
							<div class="info">
								<div class="heading"></div>
							</div>
							<a href="../sustainability/csr.php" class="btn btn-primary" role="button">Find out more <i class="zmdi zmdi-hc-fw"></i></a>
							<div class="overlay"></div>
							<div class="bgImg spotReport"></div>
						</li>
						<li class="item">
							<div class="title">With you for the long haul</div>
							<div class="info">
								<div class="heading"></div>
							</div>
							<a href="../service/longhaul.php" class="btn btn-primary" role="button">Find out more <i class="zmdi zmdi-hc-fw"></i></a>
							<div class="overlay"></div>
							<div class="bgImg spotCSR"></div>
						</li>
					</ul>
			</div>-->
			
			<?php include "../ssi/footerBoxes.php"; ?>
		</div>
	</div>
	<?php include "../ssi/footer.php"; ?>
	
</body>
<?php include "../ssi/js.php"; ?>
	
<script src="../../js/jquery-labelauty.js"></script>
<link rel="stylesheet" type="text/css" href="../../en/css/jquery-labelauty.css">
</html>
<script>
	
		$fadeIn = '';
		var end = '';

		//if(Modernizr.mq('(min-width: 768px)')){
			//$fadeIn = $('.fadeInDiv').not('.mobile');
			//end = 3800;
		//} else {
			$fadeIn = $('.fadeInDiv');
			end = 4300;
		//}
	
		var count = $fadeIn.length;
		$fadeIn.each(function(i){
			var $fadeInDiv = $(this);
			setTimeout(function(){
				$fadeInDiv.addClass('fadeIn');
				$fadeInDiv.find('.counter-num').each(function(){
					$maxNum = $(this).data('max');
					$(this).stop().text($maxNum).counterUp(
					{
						delay: 2,
						time: 300
					});
				});
				if(i+1 == count) { setTimeout(function(){ $('.fadeInDiv').removeClass('fadeInDiv fadeIn')}, 1000); }
			}, 1200*i);
		});
		
		setTimeout(function(){
			$('.fadeInDiv2').addClass('fadeIn');
		}, 1000)
		
		setTimeout(function(){
			$('.fadeInDiv3').addClass('fadeIn');
		}, 2100)
		
		setTimeout(function(){
			$('.fadeInDiv4').addClass('fadeIn');
		}, 3200)
		
		setTimeout(function(){
			$('.fadeInDiv5').addClass('fadeIn');
		}, end)
		
		
		
	
		$(".fleetsort").tablesorter(); 
		$(":checkbox").labelauty({ label: false });
		$('.hs_filter').click(function(){
			if($(this).is(':checked')){
				//$(this).nextAll("img").eq(0).attr('src', $(this).nextAll("img").eq(0).attr('src').replace("_off.png", ".png"));
				//$(this).nextAll("span").eq(0).css('color', '#616161');
			}else{
				//$(this).nextAll("img").eq(0).attr('src', $(this).nextAll("img").eq(0).attr('src').replace(".png", "_off.png"));
				//$(this).nextAll("span").eq(0).css('color', '#d0d0d0');
			}
			$(".hs_tr").each(function() {
				if(($('#hs_open_hatch').is(':checked'))&&$(this).hasClass( "hs_open_hatch" ) || ($('#hs_semi_box').is(':checked'))&&$(this).hasClass( "hs_semi_box" ) || ($('#hs_logs_fitted').is(':checked'))&&$(this).hasClass( "hs_logs_fitted" ) || ($('#hs_mech_vent').is(':checked'))&&$(this).hasClass( "hs_mech_vent" )  || ($('#hs_a60').is(':checked'))&&$(this).hasClass( "hs_a60" ) || ($('#hs_co2').is(':checked'))&&$(this).hasClass( "hs_co2" )  ){
					 $(this).show();
				}else{
					 $(this).hide();
					 return;
				}
			});
			
			hs_ownedCount = $(".owned_table .hs_tr:visible").length;
			hs_charteredCount = $(".chartered_table .hs_tr:visible").length;
			
			$(".hs_count_owner").text(hs_ownedCount);
			$(".hs_count_chartered").text(hs_charteredCount);
			$(".hs_count_total").text(hs_ownedCount+hs_charteredCount);
		}); 

		$('.sm_filter').click(function(){
			if($(this).is(':checked')){
				//$(this).nextAll("img").eq(0).attr('src', $(this).nextAll("img").eq(0).attr('src').replace("_off.png", ".png"));
				//$(this).nextAll("span").eq(0).css('color', '#616161');
			}else{
				//$(this).nextAll("img").eq(0).attr('src', $(this).nextAll("img").eq(0).attr('src').replace(".png", "_off.png"));
				//$(this).nextAll("span").eq(0).css('color', '#d0d0d0');
			}
			$(".sm_tr").each(function() {
				if(($('#sm_open_hatch').is(':checked'))&&$(this).hasClass( "sm_open_hatch" ) || ($('#sm_semi_box').is(':checked'))&&$(this).hasClass( "sm_semi_box" ) || ($('#sm_logs_fitted').is(':checked'))&&$(this).hasClass( "sm_logs_fitted" ) || ($('#sm_mech_vent').is(':checked'))&&$(this).hasClass( "sm_mech_vent" )  || ($('#sm_a60').is(':checked'))&&$(this).hasClass( "sm_a60" ) || ($('#sm_co2').is(':checked'))&&$(this).hasClass( "sm_co2" ) || ($('#sm_grab_fitted').is(':checked'))&&$(this).hasClass( "sm_grab_fitted" )  ){
					 $(this).show();
				}else{
					 $(this).hide();
					 return;
				}
			});
			
			
			
			sm_ownedCount = $(".owned_table .sm_tr:visible").length;
			sm_charteredCount = $(".chartered_table .sm_tr:visible").length;
			
			$(".sm_count_owner").text(sm_ownedCount);
			$(".sm_count_chartered").text(sm_charteredCount);
			$(".sm_count_total").text(sm_ownedCount+sm_charteredCount);
		}); 
		
		hs_ownedCount = $(".owned_table .hs_tr").length;
		hs_charteredCount = $(".chartered_table .hs_tr").length;
		
		$(".hs_count_owner").text(hs_ownedCount);
		$(".hs_count_chartered").text(hs_charteredCount);
		$(".hs_count_total").text(hs_ownedCount+hs_charteredCount);
		
		sm_ownedCount = $(".owned_table .sm_tr").length;
		sm_charteredCount = $(".chartered_table .sm_tr").length;
		
		$(".sm_count_owner").text(sm_ownedCount);
		$(".sm_count_chartered").text(sm_charteredCount);
		$(".sm_count_total").text(sm_ownedCount+sm_charteredCount);
	</script>

</html>
