/**
 *	Hide each navigational element's text and buttons
 *	Toggle them upon click
 */
$(function()
{
	var parent = $('#available_plots');
	var t_in = 500;
	var t_out = 100;

	parent.find('.outer .controls').hide();
	parent.find('.outer p').hide();
	parent.find('.outer .plot:last').css({backgroundImage: 'none'});

	$('.outer', parent).each(function()
	{
		$('h2', this).toggle(
			function()
			{
				$(this).parent().parent().find('.controls').fadeIn(t_in);
				$(this).parent().parent().find('p').fadeIn(t_in);
			},
			function()
			{
				$(this).parent().parent().find('.controls').fadeOut(t_out);
				$(this).parent().parent().find('p').fadeOut(t_out);
			}
		);
	});
});

$(function()
{
	var map_parent = $('#map_container');
	var map_id_prefix = 'map_';
	var plot_id_prefix = 'plot_';

	$(' .noJS', map_parent).remove();

	map_parent.css(
		{
			overflow: 'hidden',
			position: 'relative'
		}
	);

	var img_wrap = $('<div></div>')
						.css({'float': 'left'})
						.appendTo(map_parent)
						.css({
							position: 'absolute',
							top: 0,
							left: 0,
							lineHeight: 1
						});

	var img = $('<img />')
		.attr('src', development_map_img)
		.appendTo(img_wrap)
		.css({top: 0, left: 0});

	var zoom_button = $('<div></div>')
							.attr('id', 'map_enlarge')
							.appendTo(map_parent);

	var zoom_anchor = $('<a></a>')
							.attr('href', '#')
							.text('Enlarge')
							.appendTo(zoom_button)
							.click(zoomMap);

	img.load(function()
	{
		img_wrap.draggable(
		{
			drag: function(event, ui)
			{
				/*
				 * Make map constrained to parent element
				 * don't use built in constrain because it only works if the parent
				 * is bigger than the child.
				 */
				if (parseInt(ui.position.left) > 0)
				{
					ui.position.left = 0;
				}
				if (parseInt(ui.position.top) > 0)
				{
					ui.position.top = 0;
				}
				if((parseInt(ui.position.left - map_parent.width()) * -1) > $(this).width())
				{
					ui.position.left = $(this).width() - map_parent.width() * -1 + 'px';
				}
				if((parseInt(ui.position.top - map_parent.height()) * -1) > $(this).height())
				{
					ui.position.top = $(this).height() - map_parent.height() * -1 + 'px';
				}
			}
		})
		.css({cursor: 'move'});

		/*
		 * Pull marker positions from XML and overlay on map
		 */
		$.ajax({
			url: "plot.xml",
			cache: false,
			dataType: 'xml',
			success: function(xml){
				var plots = $('plots', xml);

				$('plot', plots).each(function() {
					var id = $(this).attr('id');
					var x = $(this).find('left').text();
					var y = $(this).find('top').text();
					var img = $(this).find('colour').text();
					var house_type = $(this).find('house_type').text();
					var status = $(this).find('status').text();

					$('<a></a>')
						.css({
							left: x + 'px',
							top: y + 'px',
							display: 'block',
							position: 'absolute',
							backgroundColor: 'transparent',
							backgroundImage: "url('/sites/tulloch.co.uk/img/map_markers/" + img + "')",
							backgroundRepeat: 'no-repeat',
							backgroundPosition: '0 0',
							width: '15px',
							height: '15px',
							cursor: 'pointer'
						})
						.appendTo(img_wrap)
						.attr('id', map_id_prefix + id)
						.click(function() {
							$('#' + plot_id_prefix + id).find('h2').click();
						})
						.hover(function() {
							
							var big_overlay = $('#map_overlay:visible').length > 0;
							var point_class = big_overlay ? '_e' : '';
							var point_id = id + point_class;
							
							var string = '<h5>Plot ' + id + '</h5>House Type: ' + house_type + '<br/>Status: ' + status;
							if($('#overlay_' + point_id).length == 0)
							{
								var overlay_id = big_overlay ? '#map_overlay' : '#map_container';
								var overlay1 = $('<div></div>')
									.attr('id', 'overlay_' + point_id)
									.attr('class', 'overlay')
									//Change overlay position here
									.appendTo(overlay_id + ' .ui-draggable');
								var overlay = $('<div></div>')
									.css({padding: 0, background: 'transparent'})
									.addClass('inner_o')
									.appendTo(overlay1);
	
								var corners = ['tl', 'tr', 'bl', 'br'];
								for(var i=0; i<corners.length; i++)
								{
									$('<span></span>')
										.attr('class', corners[i])
										.appendTo(overlay);
	
									if(i==0 || i==2)
									{
										var empty = $('<span></span>')
														.addClass('empty')
														.appendTo(overlay);
	
										if(i==2)
										{
											empty.css({backgroundPosition: '0 bottom'});	
										}
									}
									else if(i==1)
									{
										$('<div></div>').addClass('clear').appendTo(overlay);
										var center = $('<div></div>')
														.appendTo(overlay);
	
										var para = $('<div class="para"></div>')
														.appendTo(center);
	
										$('<p></p>')
											.appendTo(para)
											.html(string);
									}
								}
							}
							var pos = $(this).position();
							$('#overlay_' + point_id)
								.css({left: pos.left - 80, top: pos.top + 15})
								.show();
								
								
						}, function(){
							var point_class = $('#map_overlay:visible').length > 0 ? '_e' : '';
							var point_id = id + point_class;

							$('#overlay_' + point_id).hide();
						});

				});
  			}
		});

		/*
		 * Attach event listener to 'View on map' links
		 * and trigger a map movement
		 */
		$('#available_plots li.position a')
			.show()
			.click(function(e) {
				var plot_id = $(this).parent().parent().parent().prev().attr('id');
				var map_id = plot_id.replace(/plot_/, 'map_');
	
				var pointer = $('#' + map_id);
				var pointerPos = pointer.position();
	
				var pointer_y = pointerPos.top;
				var pointer_x = pointerPos.left;
	
				var new_y = pointer_y *-1 + ($('#map_container').height() / 2);
				var new_x = pointer_x *-1 + ($('#map_container').width() / 2);
	
				/*
				 * Make map constrained to parent element
				 * don't use built in constrain because it only works if the parent
				 * is bigger than the child.
				 */
				if (new_x > 0)
				{
					new_x = 0;
				}
				if (new_y > 0)
				{
					new_y = 0;
				}
				if((parseInt(new_x - map_parent.width()) * -1) > $(img_wrap).width())
				{
					new_x = map_parent.width() - $(img_wrap).width();
				}
				if((parseInt(new_y - map_parent.height()) * -1) > $(img_wrap).height())
				{
					new_y = map_parent.height() - $(img_wrap).height();
				}
	
				pointer.parent()
					.animate(
					{
						top: new_y + 'px',
						left: new_x + 'px'
					},
					700,
					'easeInOutCubic'
					);
	
				e.preventDefault();
		});
		img_wrap
			.animate({
				left: -parseInt(img_wrap.width() / 2 - map_parent.width() / 2) + 'px',
				top: -parseInt(img_wrap.height() / 2 - map_parent.height() / 2) + 'px'
			}, 700, 'easeInOutCubic'
		);
	});

});

/*
 * Adding in a bit of easing for map
 * 'slide to' functionality
 */
jQuery.extend(jQuery.easing,
{
	easeInOutCubic: function (x, t, b, c, d)
	{
		if ((t/=d/2) < 1) return c/2*t*t*t + b;
		return c/2*((t-=2)*t*t + 2) + b;
	}
});

function zoomMap()
{
	var _this = $(this);

	var map = $('#map_container div.ui-draggable').clone(true);
	map.unbind();
	//map.html($('#map_container div.ui-draggable *').clone(true));

	var img_w = $('#map_container').find('img').width();
	var img = map.find('img');

	var overlay = $('<div></div>')
					.attr('id', 'map_overlay')
					.height($(document).height())
					.appendTo('body');

	var transparency = $('<div></div>')
							.css({opacity: 0})
							.attr('class', 'transparency')
							.height($(document).height())
							.animate({opacity: 0.9}, 300)
							.appendTo(overlay);

	var close = $('<a></a>')
						.text('Close')
						.attr('href', '#close')
						.appendTo(map)
						.attr('class', 'close');
						
	var overlay_key = $('<ul></ul>').appendTo(map);
	
	var overlay_key_list = $('<li class="blue">Available Plots</li>'
								 + '<li class="green">Reserved Plots</li>'
								 + '<li class="grey">Not Yet Released</li>'
								 + '<li class="red">Sold</li>')
							.appendTo(overlay_key);

	var clear = $('<div></div>').attr('class', 'clear').insertAfter(overlay_key);
	
	$('.overlay', map).attr('id', function(){
		return this.id + '_e';
	});

	close.click(function() {
		overlay.fadeOut(500, function() {$(this).remove();});
	});

	map.css({
		top: '65px',
		left: '50%',
		marginLeft: ((img_w / 2) * -1) + 'px'
	});

	map.appendTo(overlay);

	overlay.find('div, img, a').css({cursor: 'default'});

	close.css({cursor: 'pointer'});

	$(window).resize(function() {
		transparency.height($(document).height());
		overlay.height($(document).height());
	});

	// quick dirty hack to redraw overlay
	setTimeout("$(window).resize()", 800);

}

$(function() {
	$('#lightbox a').lightBox({
		overlayBgColor: '#fff',
		imageLoading: '/sites/tulloch.co.uk/img/loading.gif',
		imageBtnClose: '/sites/tulloch.co.uk/img/lightbox-btn-close.gif',
		imageBtnPrev: '/sites/tulloch.co.uk/img/lightbox-btn-prev.gif',
		imageBtnNext: '/sites/tulloch.co.uk/img/lightbox-btn-next.gif'
	});

	$('.plot_buttons .gallery a').click(function() {
		$('#lightbox a:first').click();
	});
});