var $accordionTrigger, $accordionContent, $searchForm;
var blockUIConfig = {
	messages: {
		loading: '<h1><img src="' + BASE_URL + '-/images/spinner.gif" alt="" style="vertical-align: middle;"> Please wait...</h1>',
		toomany: '<p>Sorry, your search returned too many results. Please narrow your search or try using "list view".</p><p><button class="close">OK</button></p>',
		error: '<p>Sorry, an error occurred. Please try again.</p><p><button class="close">OK</button></p>'
	},
	styles: {
		loading: {
			fontSize: '.75em',
			padding: '10px'
		},
		loadingSmall: {
			fontSize: '.75em',
			padding: '10px',
			width: '85%'
		},
		warning: {
			backgroundColor: '#f00',
			border: '1px solid #ddd',
			color: '#fff',
			padding: '10px'
		}
	}
}

$(document).ready(function() {

	var spinnerImg = new Image(24,24); 
	spinnerImg.src = BASE_URL + "-/images/spinner.gif"; 

	$("body").addClass("ajax map");

	$("#listings").hide();

	$(".close").live('click', function() {
		$.unblockUI();
		return false;
	});

	$(document).ajaxError(function() {
		$.blockUI({ message: blockUIConfig.messages.error, css: blockUIConfig.styles.warning });
	});

	$searchForm = $("#search-form");
	$searchForm.attr("action", SITE_URL + 'listings/ajax_search');
	$searchForm.ajaxForm({
		beforeSubmit:  blockLoading,
		success: display
	});

	$accordionTrigger = $('.widget h2');
	$accordionContent = $accordionTrigger.next();
	var cur_stus;

	//close all on default
	$accordionContent.hide();
	$accordionTrigger.attr('stus', '');
		   
	//open default data
	$accordionContent.eq(0).slideDown();
	$accordionTrigger.eq(0).attr('stus', 'active').addClass("active");

	$accordionTrigger.click(function() {
		cur_stus = $(this).attr('stus');
		if (cur_stus != "active")
		{
			$accordionTrigger.removeClass("active");

			//reset everthing - content and attribute
			$accordionContent.slideUp();
			$accordionTrigger.attr('stus', '');

			//then open the clicked data
			$(this).next().slideDown();
			$(this).attr('stus', 'active').addClass("active");
		}
			
		return false;
	});

	// Append display results options
	var displayOptsHtml = '<div class="col-right">' +
			'Display results:<br>' +
			'<input name="search-display" id="search-map" value="map" checked="checked" type="radio"> <label for="search-map">in map view</label><br>' +
			'<input name="search-display" id="search-list" value="list" type="radio"> <label for="search-list">in list view</label>' +
		'</div>';
	$searchForm.find(".row").last().append(displayOptsHtml);

	// Insert counties
	var countiesHtml = '<div class="row">' +
		'<h4>Filter cities by county:</h4>' +
		'<div class="inner">' +
		'	<ul>' +
		'	<li><input type="checkbox" name="county[]" id="county_Lake" value="Lake"> <label for="county_Lake">Lake</label></li>' +
		'	<li><input type="checkbox" name="county[]" id="county_Porter" value="Porter"> <label for="county_Porter">Porter</label></li>' +
		'	<li><input type="checkbox" name="county[]" id="county_Newton" value="Newton"> <label for="county_Newton">Newton</label></li>' +
		'	<li><input type="checkbox" name="county[]" id="county_Jasper" value="Jasper"> <label for="county_Jasper">Jasper</label></li>' +
		'	</ul>' +
		'</div>' +
		'</div>';
	$searchForm.prepend(countiesHtml);

	$("input[name='county[]']", $searchForm).click(function() {
		loadCities();
	});

	$("#map").gmap3(
		{action: 'init',
			options:{
				center: myconfig.gmapCenter,
				zoom: myconfig.gmapZoom
			}
		}
	);

	adjustSidebarHeight();

	var theHash = window.location.hash;
	var hashSplit = theHash.split('/');
	if (hashSplit[1]) {
		loadPreview(hashSplit[1]);
	}

	prepContactLink('#contact-link');
});

$(window).resize(function() {
	$('#sidebar').css('height','auto');
	adjustSidebarHeight(); 
});

function prepContactLink(linkId) {
	var $link = $(linkId);
	var $href = $link.attr('href') + '?datatype=html';
	var cHeight = (linkId == '#contact-link') ? 620 : 400;
	$link.colorbox({
		href: $href,
		width:'400px',
		height:cHeight,
		onComplete: function() {
			prepContactForm(linkId);
		}
	});
}

function prepContactForm(linkId) {
	Recaptcha.create(RECAPTCHA_PUBLIC_KEY,
		"recaptcha",
		{
			theme: "red",
			callback: Recaptcha.focus_response_field
		}
	);

	var $formId = (linkId == '#contact-link') ? '#contact-form' : '#sms-contact-form';
	$($formId)
		.ajaxForm({
			dataType: 'json',
			beforeSubmit: function() {
				$($formId).block({ message: blockUIConfig.messages.loading, css: blockUIConfig.styles.loadingSmall });
			},
			success: function (data) {
				$($formId).unblock();
				if (!data.success) {
					$('#cboxLoadedContent').html(data.data);
					prepContactForm(linkId);
				} else {
					$.colorbox({html: data.data});
				}
			}
		});
}

function blockLoading() {
	$.blockUI({ message: blockUIConfig.messages.loading, css: blockUIConfig.styles.loading });
}

function display(data) {
	var searchType = $("#search-form input[name=search-display]:checked").val();
	if (searchType == 'map') {
		addMarkers(data);
		adjustSidebarHeight();
	} else {
		displayListings(data);
		$("#sidebar").css("height", "auto");
	}
}

function loadListings(href) {
	blockLoading();
	$.get(href, function(data) {
		displayListings(data);
	});
}

function loadCities() {
	blockLoading();
	var counties = $("input[name='county[]']", $searchForm).serialize();
	$("#city", $searchForm).load(SITE_URL + "listings/ajax_cities?" + counties, function() {
		$.unblockUI();
		$(this).parents("div").effect("highlight", {}, 3000);
	});
}

function displayListings(data) {
	$.unblockUI();
	$("body").removeClass("map");
	$("#map").hide();
	$("#listings")
		.html(data)
		.show()
		.find("#pagination a")
		.click(function() {
			loadListings($(this).attr("href"));
			return false;
		})
		.end()
		.find(".listings a").click(function() {
			var lid = $(this).attr("data-lid");
			loadPreview(lid);
			return false;
		});
}

function addMarkers(data) {
	$.unblockUI();
	$("body").addClass("map");
	$("#map").show();
	$("#listings").hide();

	if (data.total > 100) {
		$.blockUI({ message: blockUIConfig.messages.toomany, css: blockUIConfig.styles.warning });
		return;
	}
	$.blockUI({ 
		message: data.total + " listings found", 
		fadeIn: 700, 
		fadeOut: 700, 
		timeout: 2000, 
		showOverlay: false, 
		css: { 
			padding: '10px', 
			backgroundColor: '#000', 
			color: '#fff' 
		} 
	}); 
	
	
	if (data.total == 0) {
		return;
	}

	$("#map").gmap3(
		{action: 'clear'},
		{action: 'addMarkers',
			markers: data.listings,
			marker:{
				options:{
					draggable: false
				},
				events:{
					mouseover: function(marker, event, data){
						var map = $(this).gmap3('get'),
							infowindow = $(this).gmap3({action:'get', name:'infowindow'});
						var info = formatListing(data);
						if (infowindow){
							infowindow.open(map, marker);
							infowindow.setContent(info);
						} else {
							$(this).gmap3({action:'addinfowindow', anchor:marker, options:{content: info}});
						}
					},
					mouseout: function(){
						var infowindow = $(this).gmap3({action:'get', name:'infowindow'});
						if (infowindow){
							infowindow.close();
						}
					},
					click: function(marker, event, data){
						loadPreview(data.id);
					}
							  
				}
			}
		},
		{action: 'autofit'}
	);
}

function formatListing(data) {
	var img;
	if (data.img == '') {
		img = '-/images/noimageavailable.jpg';
	} else {
		img = LS_IMG_PATH + '-/images/mls/' + data.img;
	}
		
	var html = '<div class="listing-bubble">';
	html += '<img src="' + img + '" width="50" height="50" alt="">';
	html += '<p>';
	html += "<b>$" + data.price + "</b><br>";
	html += data.address + "<br>";
	html += data.city + "<br>";
	html += "MLS#: " + data.mls + "<br>";
	html += '<b class="click">Click to view details</b><br>';
	html += '</p>';
	html += '</div>';
	return html;
}

function loadPreview(id) {
	blockLoading();
	$("#preview").load(SITE_URL + "listings/ajax_view/" + id, function(response, status, xhr) {
		if (status == "success") {
			$.unblockUI();
			$("#tabs").idTabs();
			$("#mainimg", this).colorbox();
			$("a.gallery", this).colorbox({rel:"gallery", width:"75%", height:"75%"});
			$("#details-link", this).colorbox({iframe: true, width: "75%", height: "75%"});
			$($accordionTrigger[1]).click();
			$(this).effect("highlight", {}, 3000);
			window.location.hash = "#!/" + id;
			prepContactLink('#sms-contact-link');
		}
	});
}

function adjustSidebarHeight() {
	if ($('#map').is(':visible') ) {
		var mapHeight = $('#map').height();
		$('#sidebar').height(mapHeight);
	}
}