<?php
$menuItems = array();
$menuItems['index'] = 'Home';
$menuItems['aboutus'] = 'About Us';
/*$menuItems['packages'] = 'Packages';*/
$menuItems['testimonials'] = 'Testimonials';
?>
<!doctype html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<title>ARC Center</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../gumby/js/libs/modernizr-2.6.2.min.js"></script>
<link rel="stylesheet" href="../gumby/css/gumby.css">
<link rel="stylesheet" href="../gumby/css/gumby_helper.css">
<style>
body{
background-color: #BBBDC0;
}
b, strong {font-weight:bold !important;}
.wrapper{
max-width: 1040px;
margin: 0 auto 50px auto;
-moz-box-shadow: 0 0 20px 5px black;
-webkit-box-shadow: 0 0 20px 5px black;
box-shadow: 0 0 40px -5px black;
}
.row {
/*max-width:960px;*/
max-width:1040px;
min-width: 480px;
padding-left: 0;
padding-right: 0;
}
.white{
background-color: white;
}
#nav1{
/*background-color: rgba(62,82,115,0.8);*/
background-color: transparent;
color: black;
}
.banner{
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
z-index: 10;
}
.navbar{
font-weight: bold;
}
.navbar ul li > a{
text-shadow: none;
color: black;
height: 45px;
padding: 0 4px;
margin: 0 16px;
}
.navbar >ul > li:hover{
/*background-color: rgb(62,82,115);*/
/*background-color: rgb(190,215,61);*/
}
.navbar a{
color: black ;
}
.middleContent{
z-index: 10;
}
.row .arcHeadings{
text-align: center;
width: 100%;
margin: 10px auto 5px auto;
}
.row .arcHeadings > li{
text-align: center;
display: inline-block;
list-style-type: none;
border-left: 2px solid #50B748;
background-color: white;
width: 31%;
margin-left: 0;
padding-left: 2%;
padding-right: 2%;
}
.arcHeadings > li:first-child{
border-left: none;
width: 38%;
padding-left: 0;
}
.arcHeadings> li:last-child{
padding-right: 0;
}
.arcHeadings img{
display: inline;
}
.bottomContent{
margin: 15px 0;
overflow: hidden;
}
</style>
</head>
<script>
var imageArray = new Array('pic1','pic2');
function seeNextImage()
{
if(typeof timeout != "undefined") clearTimeout(timeout);
if(typeof currentImage != "undefined")
{
var i = jQuery.inArray(currentImage,imageArray) + 1;
if(i >= imageArray.length) i = 0;
nextImage = imageArray[i];
$('#' + currentImage).hide();
}
else nextImage = imageArray[0];
$('#' + nextImage).fadeIn('slow');
currentImage = nextImage;
//if(imageArray.length > 1) timeout = setTimeout('seeNextImage()', 10000);
}
</script>
<body>
<div class="wrapper">
<div class="row">
<div class="twelve columns" style="height: 7px; background-color: #50B748">
</div>
</div>
<div class="row banner">
<div class="row navbar" id="nav1">
<a class="toggle" gumby-trigger="#nav1 > ul" href="#"><i class="icon-menu"></i></a>
<h1 class="three columns logo " style="padding-top: 5px;">
<a class="push_one" href="#">
<img id="logo" src="images/arclogo.png" alt="ARC Logo" height="50px">
</a>
</h1>
<ul class="push_six five columns">
<?php
foreach($menuItems as $link => $desc)
{
$currentPage = basename($_SERVER["REQUEST_URI"]);
if(stripos($currentPage,'.php') === false) $currentPage = 'index.php';
$currentPage = array_shift(explode('.',$currentPage));
$styles = array();
$temp = '';
if($link == $currentPage) {
$temp = 'border-bottom: 3px solid black;';
}
else{
}
?>
<li style="padding:0px; "><a href="<?= $link ?>.php" style="<?= $temp ?>" ><?= strtoupper($desc) ?></a></li>
<?php
}
?>
</ul>
</div>
</div>
<div class="row white" style="width: 100%; max-height: 400px; overflow:hidden; ">
<div id="pic1" style="display:none">
<img style="width: 100%;" src="images/ARC_Photo_01.jpg">
</div>
<!--
<div id="pic2" style="display:none">
<img style="width: 100%;" src="images/callcenter2.jpg">
</div>-->
<script>seeNextImage();</script>
</div>