<?php header('Content-type: text/html; charset=utf-8'); ?>
<?php
  /* STEP 1: LOAD RECORDS - Copy this PHP code block near the TOP of your page */

  // load viewer library
  $libraryPath = 'cmsAdmin/lib/viewer_functions.php';
  $dirsToCheck = array('/usr/local/pem/vhosts/101974/webspace/httpdocs/','','../','../../','../../../');
  foreach ($dirsToCheck as $dir) { if (@include_once("$dir$libraryPath")) { break; }}
  if (!function_exists('getRecords')) { die("Couldn't load viewer library, check filepath in sourcecode."); }

  // load IMAGES records
  list($imagesRecords, $imagesMetaData) = getRecords(array(
    'tableName'   => 'images',
  ));
  
  // load LISTINGS records
  list($listingsRecords, $listingsMetaData) = getRecords(array(
    'tableName'   => 'listings',
  ));

  // load OPEN HOUSES records
  list($open_housesRecords, $open_housesMetaData) = getRecords(array(
    'tableName'   => 'open_houses',
  ));

  // load CATEGORIES records
  list($categoryRecords, $categoryMetaData) = getRecords(array(
    'tableName'   => 'category',
  ));

  // load TYPE records
  list($typeRecords, $typeMetaData) = getRecords(array(
    'tableName'   => 'type',
  ));  
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sydney Residential</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="js/captify.js"></script>
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Cantarell&subset=latin' rel='stylesheet' type='text/css'>
<link href="css/sydres.css" rel="stylesheet" type="text/css">

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
		auto: 4,
		scroll: 1,
		wrap: 'circular'
    });


});
</script>
<script type="text/javascript">
$(function(){
	$('img.captify').captify({
		// all of these options are... optional
		// ---
		// speed of the mouseover effect
		speedOver: 'fast',
		// speed of the mouseout effect
		speedOut: 'normal',
		// how long to delay the hiding of the caption after mouseout (ms)
		hideDelay: 500,	
		// 'fade', 'slide', 'always-on'
		animation: 'always-on',		
		// text/html to be placed at the beginning of every caption
		prefix: '',		
		// opacity of the caption on mouse over
		opacity: '0.7',					
		// the name of the CSS class to apply to the caption box
		className: 'caption-bottom',	
		// position of the caption (top or bottom)
		position: 'bottom',
		// caption span % of the image
		spanWidth: '100%'
	});
});
</script>
<script type="text/javascript">
sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
  <script type="text/javascript"> 
  function formAction(radio){ 
   if(radio.checked){ 
    document.displayForm.action=radio.value; 
   } 
  } 
  </script>
<script type="text/javascript">
$(document).ready(function() {

	//When page loads...
	$(".tab_content").hide(); //Hide all content
	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content

	//On Click Event
	$("ul.tabs li").click(function() {

		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content

		var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active ID content
		return false;
	});

});
</script>
</head>
<body>
<div id="pagewidth" >
    <?php include("_header.php");?>  
    <?php include("_navigation.php");?>  
<div id="wrapper" class="clearfix" > 
			<div id="maincol" >
            <!--carousel -->
            <ul id="mycarousel" class="jcarousel-skin-tango">
            <?php foreach ($imagesRecords as $record): ?>
            <!--Should be for each imagesRecords or listingsRecords where "homePage" is ticked-->
                <li><a href="">
                <?php foreach ($record['hero_shot'] as $upload): ?>
                <img src="<?php echo $upload['urlPath'] ?>" width="333" height="333" border="0" class="captify" rel="caption<?php echo $record['num'] ?>">
                <div id="caption<?php echo $record['num'] ?>"><?php echo $record['title'] ?></div>
                <?php break ?><!--Only 1 image per listing shown-->
				<?php endforeach ?>
                    </a>
                </li>
            <?php endforeach ?>
            </ul>
            <!--carousel -->
            <div id="searchBox">
            <h1>Quick Search</h1>

            <form method="POST" name ="displayForm" action="resultsMap.php" >
                <table>
                <tr valign="top">
                    <td class="title">Display:</td>
                    <td><p>  
                        <label>  
                          <input type="radio" name="View" value="resultsMap.php" onchange="formAction(this);" >  
                          Map</label>
                        <label>  
                          <input type="radio" name="View" value="resultsTable.php" onchange="formAction(this);" >  
                          Table</label>  
                        <label>  
                          <input type="radio" name="View" value="resultsThumbs.php"  onchange="formAction(this);" >  
                          Image</label>  
                        </p>
                      </td>
                </tr>
                <tr valign="top">
                    <td class="title">Category:</td>
                    <td><p>  
                        <select name="category" class="searchField">
                        <option value="">select</option>  
                        <?php foreach ($categoryRecords as $record): ?>
                            <option><?php echo $record['title'] ?></option>  
                        <?php endforeach ?>  
                        </select>
                        </p>
                      </td>
                </tr>
                <tr valign="top">
                    <td class="title">Type:</td>
                    <td><p>  
                        <select name="type" class="searchField">  
                        <option value="">select</option>  
                        <?php foreach ($typeRecords as $record): ?>
                            <option><?php echo $record['title'] ?></option>  
                        <?php endforeach ?>  
                        </select>
                        </p>
                      </td>
                </tr>
                <tr valign="top">
                    <td class="title">Keyword:</td>
                    <td><p>  
                            <input type="text" name="title_keyword" value="" class="searchField">
                        </p>
                      </td>
                </tr>
                <tr valign="top">
                    <td></td>
                    <td><p>  
                            <input type="submit" name="submit" value="Search">
                        </p>
                      </td>
                </tr>
                </table>
            </form>            
            </div>
            <div id="quoteBox"></div>
            <div id="displayBox">
                <ul class="tabs">
                    <li><a href="#tab1">Open House</a></li>
                    <li><a href="#tab2">Rentals</a></li>
                    <li><a href="#tab3">Just Sold</a></li>
                </ul>
                
                <div class="tab_container">
                    <div id="tab1" class="tab_content">
                        <!--Content-->
						<?php foreach ($open_housesRecords as $record): ?>
                          <?php echo $record['title'] ?> - <?php echo date("D, M jS: g:i a", strtotime($record['date'])) ?><br/>
                        <?php endforeach ?>
                    </div>
                    <div id="tab2" class="tab_content">
                       <!--Content-->
                    </div>
                    <div id="tab3" class="tab_content">
                       <!--Content-->
                    </div>
                </div>            
            </div>

            </div>
</div>
    <?php include("_footer.php");?>  


</body>
</html>