$(document).bind('ready', function(){
	_load_dropnav();
	_load_productdrop();
	_load_feature();
	_load_input_prompt();
});

function _load_feature(){
	if($('#feature-image').length){
		var sets = {
			0 : {
				0 : { 'image' : 'tpl/img/feature-set-1-detail.jpg' },
				1 : { 'image' : 'tpl/img/feature-set-1-design.jpg' },
				2 : {
					'image' : 'tpl/img/feature-set-1-detail.jpg',
					'details' : {
						0 : {
							'image' : 'tpl/img/feature-detail-trombone.jpg',
							'title' : 'Hand Rails',
							'content' : '<ul><li>Trombone handrail ends project 300mm for added safety, 42mm diameter handrail is comfortable and easy to grip.</li></ul>',
							'x' : 190,
							'y' : 140
						},
						1 : {
							'image' : 'tpl/img/feature-detail-flange.jpg',
							'title' : 'Wall connectors',
							'content' : '<ul><li>Provide a continuous handrail form the platform to the building wall.</li><li>Flange cover ensures no unsightly screw fixings left exposed.</li></ul>',
							'x' : 370,
							'y' : 50
						}
					}
				}
			},
			1 : {
				0 : { 'image' : 'tpl/img/feature-set-2-detail.jpg' },
				1 : { 'image' : 'tpl/img/feature-set-2-design.jpg' },
				2 : {
					'image' : 'tpl/img/feature-set-2-detail.jpg',
					'details' : {
						0 : {
							'image' : 'tpl/img/feature-detail-metal.jpg',
							'title' : 'Ramp Surface',
							'content' : '<ul><li>Galvanised to prevent rusting</li><li>Multi directional slip resistant walkway surface</li><li>Strong & durable</li><li>Self Draining</li></ul>',
							'x' : 280,
							'y' : 250
						},
						1 : {
							'image' : 'tpl/img/feature-detail-rail.jpg',
							'title' : 'Connectors',
							'content' : '<ul><li>Provide continuous handrail</li><li>UV stabilised.</li><li>Positive grip & warm feel</li></ul>',
							'x' : 180,
							'y' : 130
						}
					}

				}
			}
		};

		var slideshow_images = Array();
		$.getJSON('api/?method=slideshow_image.getList', function(data){
			for(i in data.slideshow_images){
				if(!data.slideshow_images[i].image) continue;
				slideshow_images.push(data.slideshow_images[i].image);
			}
		});

		var settings = {
			'slideshow' : 0,
			'set' : 0,
			'stage' : 0,
			'pause' : false,
			'action' : null
		};

		$('#image-control li.play-control a').bind('click', function(){
			if(settings.pause) _feature_play();
			else _feature_pause();
			return false;
		});

		$('#image-control li.button a')
			.bind('click', function(){
				clearTimeout(settings.action);
				if($(this).closest('li').is('.design')) 			settings.stage=0;
				else if($(this).closest('li').is('.construction')) 	settings.stage=1;
				else 												settings.stage=2;
				_feature_load_next();
				return false;
			});

		var _feature_pause = function(){
			settings.pause = true;
			$('li.play-control a').addClass('paused');
		}

		var _feature_play = function(){
			settings.pause = false;
			$('li.play-control a').removeClass('paused');
		}

		var _feature_load_next = function(){
			var delay = 5000;
			if(settings.pause){
				settings.action = setTimeout(function(){ _feature_load_next(); }, delay);
			}else{
				if(!sets[settings.set] && !settings.slideshow){
					settings.slideshow = 1;
					$('#image-control').fadeOut(500);
				}
	
				if(settings.slideshow){
					$('img#image')
						.fadeOut(500, function(){
							$('.feature-detail, .feature-point').remove();
							$(this)
								.removeAttr('src')
								.unbind('load')
								.bind('load', function(){
									$(this).fadeIn(500, function(){
										if(slideshow_images.length <= settings.slideshow) settings.slideshow=1;
										else settings.slideshow++;
										settings.action = setTimeout(function(){ _feature_load_next(); }, delay);
									});
								})
								.attr('src', slideshow_images[settings.slideshow-1]);
						});
				}else{
					var current_set = sets[settings.set][settings.stage];
					$('#image-control li a').removeClass('selected');
					if(settings.stage==2)		$('#image-control li.detail a').addClass('selected');
					else if(settings.stage==1)	$('#image-control li.construction a').addClass('selected');
					else						$('#image-control li.design a').addClass('selected');
					
					$('img#image')
						.fadeOut(500, function(){
							$('.feature-detail, .feature-point').remove();
							$(this)
								.removeAttr('src')
								.unbind('load')
								.bind('load', function(){
									$(this).fadeIn(500, function(){
										if(current_set.details){
											for(key in current_set.details){
												var new_button = $('<a id="feature-'+key+'" href="" style="left:'+current_set.details[key]['x']+'px;top:'+current_set.details[key]['y']+'px;" class="feature-point"></a>');
												$('#feature-image')
													.prepend('<div class="feature-detail feature-'+key+''+(current_set.details[key]['x']>240?' feature-detail-left':'')+'">'
																			+'<div style="background-image:url('+current_set.details[key]['image']+')" class="detail-image"></div>'
																			+'<h4>'+current_set.details[key]['title']+'</h4>'
																			+current_set.details[key]['content']
																			+'</div>')
													.prepend(new_button);
												$(new_button)
													.hover(
														function(){
															_feature_pause();
															var target_class = '.'+$(this).attr('id');
															if($(target_class).is('.feature-detail-left')) 	$(target_class).animate({ 'left' : '0px' }, 250);
															else 											$(target_class).animate({ 'right' : '0px' }, 250);
														},
														function(){
															_feature_play();
															var target_class = '.'+$(this).attr('id');
															if($(target_class).is('.feature-detail-left')) 	$(target_class).animate({ 'left' : '-174px' }, 250);
															else 											$(target_class).animate({ 'right' : '-174px' }, 250);
														}
													)
													.bind('click', function(){ return false; });
											}
										}
										settings.action = setTimeout(function(){ _feature_load_next(); }, delay);
									 });
								})
								.attr('src', current_set.image);
					   });
						
					if(settings.stage == 2 && !settings.slideshow){
						settings.stage = 0;
						settings.set++;
					}else settings.stage++;
		
				}
			}
		}

		_feature_load_next();
	}
}

function _load_input_prompt(){
	$('.email-signup form .text')
		.bind('focus', function(){
			if($(this).val()=='Please enter your email...') $(this).val('');
		})
		.bind('blur', function(){
			if($(this).val()=='') $(this).val('Please enter your email...');
		});
}

function _load_productdrop(){
	$('#p_id').bind('change', function(){
		window.location = $(this).val();
	});
}

function _load_dropnav(){
	var over_nav = {'drop-bar':false, 'header':false};
	$('#drop-bar').bind('mouseenter', function(){ over_nav['drop-bar']=true; });
	$('#header').bind('mouseenter', function(){ over_nav['header']=true; });

	$('#drop-bar').bind('mouseleave', function(){
		over_nav['drop-bar']=false;
		if(!over_nav['header']) $('#drop-bar').css('display', 'none');
	});

	$('#header').bind('mouseleave', function(){
		over_nav['header']=false;
		if(!over_nav['drop-bar']){
			$('#drop-bar').css('display', 'none');
			$('.nav-two a').removeClass('hover');
		}
	});

	$('.nav-two a').bind(
		'mouseenter',
		function(){
			$('#drop-bar').css('display', 'none');
			if($(this).parent().is('.products, .services')){
				$('#drop-bar p').css('display', 'none');
				if($(this).parent().is('.services')) $('#drop-bar .services-list').css('display', 'block');
				if($(this).parent().is('.products')) $('#drop-bar .product-list').css('display', 'block');
				$('.nav-two a').removeClass('hover');
				$('#drop-bar').css('display', 'block');
				$(this).addClass('hover');
			}else{
				$('.nav-two a').removeClass('hover');
			}
		}
	);

}