// JavaScript Document

var j$ = jQuery;

	j$(document).ready(init);
//	j$(window).load(loaded);

var windowWidth = 400;
var windowHeight = 400;
var contentHeight = 0;
var lcHeight = 0;
var rcHeight = 0;
var lcTop = 0;
var rcTop = 0;

var ii = 0;
var sections = 0;

var geocoder, map, addressMarker, gdir, fromAddress, toAddress;

var checkString = '';

function init()
{
	//ASSIGN VALUES TO GLOBALS
	windowWidth = j$(window).width();
	windowHeight = j$(window).height();
////////////////////////////////////////////////////////////////////////////



////////////////////////////////////////////////////////////////////////////
	//TABLE RESET
	j$('table').attr({'cellspacing':0, 'width':'100%'});
	j$('td').attr({'valign':'top'});
	j$('td:empty').attr({'width':''});

////////////////////////////////////////////////////////////////////////////



////////////////////////////////////////////////////////////////////////////
	//Layout Tweaks
	j$('#footnav li:last').css({'border-right':'none'});
	j$('body.searchPage div.listingBlock:odd').css({'margin-right':0}).after('<div class="floatClear"></div>');
	j$('body.searchPage div.ajaxSearch_result:odd').css({'margin-right':0}).after('<div class="floatClear"></div>');
	j$('#news table tr td:first-child a').css({'padding':'0 30px 0 0','width':'80px','display':'block'});
	j$('#news table tr td>br').remove();
	j$('#locationTitle').css({'position':'absolute'})
	j$('#headInner').css({'position':'absolute'})
	
////////////////////////////////////////////////////////////////////////////



////////////////////////////////////////////////////////////////////////////
	//apply target="blank" to OUTGOING LINKS
	j$('a').each(function(i){
			var h=j$(this).attr('href');
			if(h.indexOf('http://')>-1)
			{
				var cI = h.indexOf('cypresspropertygroup.com');
				if(cI<0 || cI>12)
				{
					j$(this).attr({'target':'_blank'});
				}
			}
		})
////////////////////////////////////////////////////////////////////////////


////////////////////////////////////////////////////////////////////////////
	//Add print button to listing page
	var $printButton = j$('<a id="printButton" href="#" title="Print this page"><img src="/assets/images/printPageButton.gif" alt="Print this page" /></a>')
	$printButton.click(
		function()
		{
			window.print();
			return false;
		}
	)
	j$('#communicator #recommendPage').after($printButton);
////////////////////////////////////////////////////////////////////////////


////////////////////////////////////////////////////////////////////////////
////	anything slider
//	j$('.anythingSlider .sliderPic').each(
//		function()
//		{
//			if(j$(this).html().indexOf('<img') < 0)
//			{
//				j$(this).html('<img src="/assets/images/noPhoto.jpg" />');
//			}
//		}
//	);
	
	j$('.anythingSlider').anythingSlider({
		easing: "easeInOutExpo",        // Anything other than "linear" or "swing" requires the easing plugin
		autoPlay: true,                 // This turns off the entire FUNCTIONALY, not just if it starts running or not.
		delay: 6000,                    // How long between slide transitions in AutoPlay mode
		startStopped: false,            // If autoPlay is on, this can force it to start stopped
		animationTime: 600,             // How long the slide transition takes
		hashTags: true,                 // Should links change the hashtag in the URL?
		buildNavigation: true,          // If true, builds and list of anchor links to link to each slide
		pauseOnHover: true,             // If true, and autoPlay is enabled, the show will pause on hover
		startText: "Go",             // Start text
		stopText: "Stop",               // Stop text
		navigationFormatter: navFormat       // Details at the top of the file on this use (advanced use)
	});
	function navFormat(index, panel){
		return panel.attr('title')
//		return index + " Toot"; // This would have each tab with the text 'X Panel' where X = index
	}
	
////////////////////////////////////////////////////////////////////////////


////////////////////////////////////////////////////////////////////////////
	//galleriffic
	
	if(j$('#galleryCanvas #thumbs ul.thumbs').children().size() > 0)
	{
		// We only want these styles applied when javascript is enabled
		$('div.navigation').css({'width' : '400px', 'float' : 'left'});
		$('div.content').css('display', 'block');
		
		var slideURL = j$('#galleryCanvas #thumbs ul.thumbs:first a').attr('href');
		j$.get(slideURL,
			function()
			{
				var $topPic = j$('<img src="'+slideURL+'"/>');
				j$('#section1').prepend($topPic);
				var baseHeight = $topPic.innerHeight();
				baseHeight *= 0.5;
				var baseWidth = $topPic.innerWidth();
				baseWidth *=0.5;
				$topPic.attr('height',baseHeight).attr('width',baseWidth).css({'float':'right','display':'block','margin':'0 0 10px 15px'});
			}
		);

		// Initially set opacity on thumbs and add
		// additional styling for hover effect on thumbs
		var onMouseOutOpacity = 0.4;
		$('#thumbs ul.thumbs li a').opacityrollover({
			mouseOutOpacity:   onMouseOutOpacity,
			mouseOverOpacity:  1.0,
			fadeSpeed:         'fast',
			exemptionSelector: '.selected a'
		});
		
		var gallery = j$('#thumbs').galleriffic({
			delay:                     2500,
			numThumbs:                 15,
			preloadAhead:              10,
			enableTopPager:            true,
			enableBottomPager:         true,
			maxPagesToShow:            7,
			imageContainerSel:         '#slideshow',
			controlsContainerSel:      '#controls',
			captionContainerSel:       '#caption',
			loadingContainerSel:       '#loading',
			renderSSControls:          true,
			renderNavControls:         true,
			playLinkText:              'Play Slideshow',
			pauseLinkText:             'Pause Slideshow',
			prevLinkText:              '&lsaquo; Previous Photo',
			nextLinkText:              'Next Photo &rsaquo;',
			nextPageLinkText:          'Next &rsaquo;',
			prevPageLinkText:          '&lsaquo; Prev',
			enableHistory:             false,
			autoStart:                 false,
			syncTransitions:           true,
			defaultTransitionDuration: 900,
			onSlideChange:             function(prevIndex, nextIndex) {
				// 'this' refers to the gallery, which is an extension of $('#thumbs')
				this.find('ul.thumbs').children().children()
					.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
					.eq(nextIndex).fadeTo('fast', 1.0);
			},
			onPageTransitionOut:       function(callback) {
				this.fadeTo('fast', 0.0, callback);
			},
			onPageTransitionIn:        function() {
				this.fadeTo('fast', 1.0);
			}
		});
	}
////////////////////////////////////////////////////////////////////////////


////////////////////////////////////////////////////////////////////////////
	//map on listing page
	
	if(j$('body').hasClass('listingPage')&&j$('#mapCanvas').length != 0)
	{
		geocoder = new GClientGeocoder();
		var marker
		

		map = new GMap2(document.getElementById('mapCanvas'));
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
		gdir  = new GDirections(map, document.getElementById("directions"));
		j$('body').append('<div id="message">toot</div>');
		j$('#message').hide();

		geocoder.getLatLng(
			addressString,
			function(latlng)
			{
				if(!latlng)
				{
					alert('Error: "' + addressString + '" not found.');
				}
				else
				{
					marker = new GMarker(latlng);
					var propertyAddress = 'meh';
					var propertyName = 'foo';
					var rx = /\s+/g;
					propertyAddress = j$('#propertyAddress').html().replace(rx,'&nbsp;');
					propertyName = j$('h2').html().replace(rx,'&nbsp;');
					marker.name= propertyName;
					marker.address = propertyAddress;
					map.addOverlay(marker);
					addEventHandlers(marker)
					map.setCenter(latlng, 16);
				}
			});
		
		function addEventHandlers(m)
		{
			  GEvent.addListener(m, "mouseover", function(){
				displayPoint(m);
				
			});
			  GEvent.addListener(m, "mouseout", function(){
				hidePoint(m);
			});
		}
		
		j$("#message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));
	}
	
////////////////////////////////////////////////////////////////////////////


////////////////////////////////////////////////////////////////////////////
	//contact on listing page
	
	if(j$('body').hasClass('listingPage'))
	{
		var $formHeight = j$('#enquiryForm').innerHeight();
		j$('#enquiryForm').css({'height':25,'overflow':'hidden'});
		j$('#enquiryFields legend').toggle(
			function()
			{
				j$('#enquiryForm').animate({'height':$formHeight})
			},
			function()
			{
				j$('#enquiryForm').animate({'height':25})
			}
		)
	}
////////////////////////////////////////////////////////////////////////////


////////////////////////////////////////////////////////////////////////////
	//extend search form
	$hiddenSearch = j$("<input id='hiddenInput' name='search' type='hidden' />");
	$advancedOptions = j$('<div id="advancedOptions"><h4>Advanced Search Options</h4></div>');
	$menus = j$('<fieldset id="menus"></fieldset>');
	$saleLeaseSelect =j$("<fieldset id='saleLease'><label class='checkLabel' for='sale'><input class='checkbox' type='checkbox' name='sale' value='sale' />For Sale</label><label class='checkLabel' for='lease'><input class='checkbox' type='checkbox' name='lease' value='lease' />For Lease</label></fieldset>");
	$saleOrLeaseMenu =j$("<select id='buildingSizeSelect'><option value=''>Property Type</option><option value='lease'>For Lease</option><option value='sale'>For Sale</option><option value='sale lease'>For Sale or Lease</option></select>");
	$buildingSizeSelect =j$("<select id='buildingSizeSelect'><option value=''>Building Size</option><option value='bsr1'>500-1,000</option><option value='bsr2'>1,001-2,500</option><option value='bsr3'>2501-5,000</option><option value='bsr4'>5,001-15,000</option><option value='bsr5'>15,001-25,000</option><option value='bsr6'>25,001+</option></select>");
	$spaceAvailableSelect =j$("<select id='spaceAvailableSelect'><option value=''>Space Available</option><option value='sar1'>500-1,000</option><option value='sar2'>1,001-2,500</option><option value='sar3'>2501-5,000</option><option value='sar4'>5,001-15,000</option><option value='sar5'>15,001-25,000</option><option value='sar6'>25,001+</option></select>");
	$priceRangeSelect =j$("<select id='priceRangeSelect'><option value=''>Price Range</option><option value='pr1'>0 - $100,000</option><option value='pr2'>$100,001 - 200,000</option><option value='pr3'>$200,001 - 350,000</option><option value='pr4'>$350,001 - 500,000</option><option value='pr5'>$500,001 - 1,000,000</option><option value='pr6'>$1,000,001 +</option></select>");
	$rentRangeSelect =j$("<select id='rentRangeSelect'><option value=''>Rent per square foot</option><option value='rr1'>$1 - $5 per s.f.</option><option value='rr2'>$6 - $10 per s.f.</option><option value='rr3'>$11 - $20 per s.f.</option><option value='rr4'>$21 - $30 per s.f.</option><option value='rr5'>$31+ per s.f.</option></select>");
	$propertyTypeSelect =j$("<fieldset id='propertyType'><label class='checkLabel' for='office'><input class='checkbox' type='checkbox' name='office' value='office' />Office</label><label class='checkLabel' for='industrial'><input class='checkbox' type='checkbox' name='industrial' value='industrial' />Industrial</label><label class='checkLabel' for='retail'><input class='checkbox' type='checkbox' name='retail' value='retail' />Retail</label><label class='checkLabel' for='flex'><input class='checkbox' type='checkbox' name='flex' value='flex' />Flex</label><label class='checkLabel' for='mulit-family'><input class='checkbox' type='checkbox' name='mulit-family' value='mulit-family' />Muti-Family</label><label class='checkLabel' for='land'><input class='checkbox' type='checkbox' name='land' value='land' />Land</label><label class='checkLabel' for='farm'><input class='checkbox' type='checkbox' name='farm' value='farm' />Farm</label><label class='checkLabel' for='other'><input class='checkbox' type='checkbox' name='other' value='other' />Other</label></fieldset>");
	
	if(j$("body").hasClass("searchPage"))
	{
		$menus
			.append($buildingSizeSelect)
			.append($spaceAvailableSelect)
			.append($priceRangeSelect)
			.append($rentRangeSelect)
		$advancedOptions
			.append($saleLeaseSelect)
			.append($menus)
			.append($propertyTypeSelect);
		$searchInput = j$('body.searchPage input#ajaxSearch_input');
		$searchInput
			.attr({'name':'mainSearch','value':''})
			.keyup(enterText);
		j$('body.searchPage #mainInput')
			.after($advancedOptions)
			.after($hiddenSearch)
		$buildingSizeSelect.change(enterText);
		$spaceAvailableSelect.change(enterText);
		$priceRangeSelect.change(enterText);
		$rentRangeSelect.change(enterText);
	}
	else
	{
		$menus
			.append($saleOrLeaseMenu)
			.append($spaceAvailableSelect)
		$searchInput = j$('input#ajaxSearch_input');
		$searchInput
			.attr({'name':'mainSearch','value':''})
			.keyup(enterText);
		j$('#mainInput')
			.after($menus)
			.after($hiddenSearch)
		$saleOrLeaseMenu.change(enterText);
		$spaceAvailableSelect.change(enterText);
	}
	
	
	j$('#advancedOptions input.checkbox').change(
		function()
		{
			checkString = "";
			j$('#advancedOptions input.checkbox:checked').each(
				function()
				{
					checkString += $(this).val() + " ";
				}
			);
			enterText();
		}
	);

//	j$('body.searchPage .searchPic').each(
//		function()
//		{
//			if(j$(this).html().indexOf('img') < 0)
//			{
//				j$(this).html('<img src="/assets/images/noPhoto_thumb.jpg" />');
//			}
//		}
//	);

}


function enterText(e)
{	
	if(j$("body").hasClass("searchPage"))
	{
		$searchString = $searchInput.val() + ' ' + $buildingSizeSelect.val() + ' ' + $spaceAvailableSelect.val() + ' ' + $priceRangeSelect.val() + ' ' + $rentRangeSelect.val() + ' ' + checkString;
	}
	else
	{
		$searchString = $searchInput.val() + ' ' +  $spaceAvailableSelect.val() + ' ' + $saleOrLeaseMenu.val();
	}


	$hiddenSearch.stop().val($searchString);
}

function displayPoint(marker)
{
	var pointname = marker.name;
	var pointaddress = marker.address;
	var contents = "<h4>"+ pointname +"</h4><p>"+ pointaddress +"</p>";
	
//			map.panTo(marker.getPoint());
	var markerOffset = map.fromLatLngToDivPixel(marker.getPoint());
	j$("#message").show().css({ top:markerOffset.y, left:markerOffset.x, position:'absolute' }).html(contents);
}
function hidePoint(marker)
{
	j$("#message").hide();
}