// JavaScript Document

jQuery.fn.exists = function(){return jQuery(this).length>0;}

function removeBaarsMapOverlay(){
	$('#mapoverlay').fadeOut('slow', function(){
		$('#mapoverlay').remove();
	});
}
function slidedownimages(){
	$('.baarimages').slideDown();
	$('.slider1').anythingSlider();
	$('.slider1').anythingSlider($('.slider1').data('AnythingSlider').currentPage);
}
function baarPage(){
	if ($("#bookingformtabs").exists()) {
		$('#baarbookmebutton').remove();
	}
	var $tabs3 = $(".baartabs").tabs();
	$tabs3.tabs( "option", "fx", { opacity: 'toggle' } );
	
	//scrollpane parts
	var scrollPane = $('.scroll-pane');
	var scrollContent = $('.scroll-content');
	
	//build slider
	var scrollbar = $(".scroll-bar").slider({
		slide:function(e, ui){
			if( scrollContent.width() > scrollPane.width() ){ scrollContent.css('margin-left', Math.round( ui.value / 100 * ( scrollPane.width() - scrollContent.width() )) + 'px'); }
			else { scrollContent.css('margin-left', 0); }
		}
	});
	
	//append icon to handle
	var handleHelper = scrollbar.find('.ui-slider-handle')
	.mousedown(function(e){
		scrollbar.width( handleHelper.width() );
		e.preventDefault();
	})
	.mouseup(function(e){
		scrollbar.width( '100%' );
		//return false;
		e.preventDefault();
	})
	.append('<span class="ui-icon ui-icon-grip-dotted-vertical"></span>')
	.wrap('<div class="ui-handle-helper-parent"></div>').parent();
	
	//change overflow to hidden now that slider handles the scrolling
	scrollPane.css('overflow','hidden');
	
	//size scrollbar and handle proportionally to scroll distance
	function sizeScrollbar(){
		var remainder = scrollContent.width() - scrollPane.width();
		var proportion = remainder / scrollContent.width();
		var handleSize = scrollPane.width() - (proportion * scrollPane.width());
		scrollbar.find('.ui-slider-handle').css({
			width: handleSize,
			'margin-left': -handleSize/2
		});
		handleHelper.width('').width( scrollbar.width() - handleSize);
	}
	
	//reset slider value based on scroll content position
	function resetValue(){
		var remainder = scrollPane.width() - scrollContent.width();
		var leftVal = scrollContent.css('margin-left') == 'auto' ? 0 : parseInt(scrollContent.css('margin-left'));
		var percentage = Math.round(leftVal / remainder * 100);
		scrollbar.slider("value", percentage);
	}
	//if the slider is 100% and window gets larger, reveal content
	function reflowContent(){
			var showing = scrollContent.width() + parseInt( scrollContent.css('margin-left') );
			var gap = scrollPane.width() - showing;
			if(gap > 0){
				scrollContent.css('margin-left', parseInt( scrollContent.css('margin-left') ) + gap);
			}
	}
	
	//change handle position on window resize
	$(window)
	.resize(function(e){
			resetValue();
			sizeScrollbar();
			reflowContent();
	});
	//init scrollbar size
	var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
	if ($.browser.webkit && (is_chrome == false)) {
		setTimeout(sizeScrollbar,10);//safari wants a timeout
	}else {
		sizeScrollbar();
	}
	
	var $slider = $('.slider1');
	var $scrollbar = $slider.parent().children('.baarimagescroller');
	var $thumbspanel = $scrollbar.children('.scroll-content');
	var slidecount = $thumbspanel.size();
	$slider.anythingSlider({
		easing: 'easeInOutExpo',
		resizeContents: false,
		pauseOnHover: true,
		buildNavigation: false,
		autoPlay: false
	});
	var count = 1;
	$thumbspanel.children('.scroll-content-item').each( function(index,element){
		$(element).data('slide',count);
		$(element).children('a').click( function(e){
			var s = $(element).data('slide');
			$slider.anythingSlider(s);
			e.preventDefault();
		});
		count = count + 1;
	});
	if(window.currenttwitter != null){
		if(window.currenttwitter != ''){
			try{
				$(".tweet").tweet({
					username: window.currenttwitter,
					join_text: "auto",
					avatar_size: 64,
					count: 8,
					auto_join_text_default: "we said,", 
					auto_join_text_ed: "we",
					auto_join_text_ing: "we were",
					auto_join_text_reply: "we replied to",
					auto_join_text_url: "we were checking out",
					loading_text: "loading tweets..."
				});
			}catch(err){
				//
			}
			window.currenttwitter = null;
		}
	}
	/*if ($.browser.webkit){
		//
	}else if ($.browser.opera){
		//
	}else{*/
		$tabs3.bind('tabsshow', function(event, ui) {
			if (ui.panel.id.match(/-1$/)) {
				slidedownimages();
			}else{
				$('.baarimages').slideUp();
				//$('.slider1').anythingSlider($('.slider1').data('AnythingSlider').currentPage);
				
			}
		});
	//}
}
$(document).ready(function(){
    $('#mapoverlay').click(removeBaarsMapOverlay);
	$('#mapoverlay').mousedown(removeBaarsMapOverlay);
	$( "button").button();
	$( "input:submit").button();
	$( ".juibutton").button();
	
	var $tabs2 = $("#recruitmentformtabs").tabs();
	$tabs2.tabs( "option", "fx", { opacity: 'toggle' } );
	
	$('.juibuttonset').buttonset();
	
	if ($("#bookingformtabs").exists()) {
	
		var $tabs = $("#bookingformtabs").tabs();
		$tabs.tabs( "option", "fx", { opacity: 'toggle' } );
	
		$('#baars-booking').buttonset();
		
		
		/* Firefox 3.6 doesn't put the divs inside the buttons, so we do it manually for it */
		$('#baars-bookingbaar1').appendTo($('#radio1').button("widget").children());
		$('#baars-bookingbaar2').appendTo($('#radio2').button("widget").children());
		$('#baars-bookingbaar3').appendTo($('#radio3').button("widget").children());
		$('#baars-bookingbaar4').appendTo($('#radio4').button("widget").children());
		$('#baars-bookingbaar5').appendTo($('#radio5').button("widget").children());
		$('#baars-bookingbaar6').appendTo($('#radio6').button("widget").children());
		$('#baars-bookingbaar7').appendTo($('#radio7').button("widget").children());

	
	
	
		$('#bookingformextras').buttonset();

		$('#bookingformtabs #nexttag1').click(function(e) { // bind click event to link
			$tabs.tabs('select', 1);
			e.preventDefault();
		});
		$('#bookingformtabs #nexttag2').click(function(e) { // bind click event to link
			$tabs.tabs('select', 2);
			e.preventDefault();
		});
		$('#bookingformtabs #nexttag3').click(function(e) { // bind click event to link
			$tabs.tabs('select', 3);
			e.preventDefault();
		});
		$('#bookingformtabs #nexttag4').click(function(e) { // bind click event to link
			$tabs.tabs('select', 4);
			e.preventDefault();
		});
		
		
		$('#bookingformtabs #backtag2').click(function(e) { // bind click event to link
			$tabs.tabs('select', 0);
			e.preventDefault();
		});
		$('#bookingformtabs #backtag3').click(function(e) { // bind click event to link
			$tabs.tabs('select', 1);
			e.preventDefault();
		});
		$('#bookingformtabs #backtag4').click(function(e) { // bind click event to link
			$tabs.tabs('select', 2);
			e.preventDefault();
		});
		$('#bookingformtabs #backtag5').click(function(e) { // bind click event to link
			$tabs.tabs('select', 3);
			e.preventDefault();
		});
		$("#baar1moreinfo").click(function(e){
				var $dialog = $('<div></div>')
				.load('http://www.baabar.co.uk/the-baars/fleet-street/ #baar', function(){ baarPage(); })
				.dialog({
					autoOpen: false,
					title: '',
					modal: true,
					width: '900',
					maxHeight: '95%',
					resizable:false,
					show: 'fade',
					hide: 'fade',
					open: function(){
						$('.ui-widget-overlay').live("click", function() {
							 $dialog.dialog("close");
						  })
					},
					position: [ 'center','top']
				}).dialog("open");
				
				e.preventDefault();
		});
		$("#baar2moreinfo").click(function(e){
				var $dialog = $('<div></div>')
				.load('http://www.baabar.co.uk/the-baars/hardman-street/ #baar', function(){ baarPage(); })
				.dialog({
					autoOpen: false,
					title: '',
					modal: true,
					width: '900',
					maxHeight: '95%',
					resizable:false,
					show: 'fade',
					hide: 'fade',
					open: function(){
						$('.ui-widget-overlay').live("click", function() {
							 $dialog.dialog("close");
						  })
					},
					position: [ 'center','top']
				}).dialog("open");
				
				e.preventDefault();
		});
		$("#baar3moreinfo").click(function(e){
				var $dialog = $('<div></div>')
				.load('http://www.baabar.co.uk/the-baars/deansgate-locks/ #baar', function(){ baarPage(); })
				.dialog({
					autoOpen: false,
					title: '',
					modal: true,
					width: '900',
					maxHeight: '95%',
					resizable:false,
					show: 'fade',
					hide: 'fade',
					open: function(){
						$('.ui-widget-overlay').live("click", function() {
							 $dialog.dialog("close");
						  })
					},
					position: [ 'center','top']
				}).dialog("open");
				
				e.preventDefault();
		});
		$("#baar4moreinfo").click(function(e){
				var $dialog = $('<div></div>')
				.load('http://www.baabar.co.uk/the-baars/sackville/ #baar', function(){ baarPage(); })
				.dialog({
					autoOpen: false,
					title: '',
					modal: true,
					width: '900',
					maxHeight: '95%',
					resizable:false,
					show: 'fade',
					hide: 'fade',
					open: function(){
						$('.ui-widget-overlay').live("click", function() {
							 $dialog.dialog("close");
						  })
					},
					position: [ 'center','top']
				}).dialog("open");
				e.preventDefault();
		});
		$("#baar5moreinfo").click(function(e){
				var $dialog = $('<div></div>')
				.load('http://www.baabar.co.uk/the-baars/fallowfield/ #baar', function(){ baarPage(); })
				.dialog({
					autoOpen: false,
					title: '',
					modal: true,
					width: '900',
					maxHeight: '95%',
					resizable:false,
					show: 'fade',
					hide: 'fade',
					open: function(){
						$('.ui-widget-overlay').live("click", function() {
							 $dialog.dialog("close");
						  })
					},
					position: [ 'center','top']
				}).dialog("open");
				
				e.preventDefault();
		});
		$("#baar6moreinfo").click(function(e){
				var $dialog = $('<div></div>')
				.load('http://www.baabar.co.uk/the-baars/wallgate/ #baar', function(){ baarPage(); })
				.dialog({
					autoOpen: false,
					title: '',
					modal: true,
					width: '900',
					maxHeight: '95%',
					resizable:false,
					show: 'fade',
					hide: 'fade',
					open: function(){
						$('.ui-widget-overlay').live("click", function() {
							 $dialog.dialog("close");
						  })
					},
					position: [ 'center','top']
				}).dialog("open");
				
				e.preventDefault();
		});
		$("#baar7moreinfo").click(function(e){
				var $dialog = $('<div></div>')
				.load('http://www.baabar.co.uk/the-baars/goose-gate/ #baar', function(){ baarPage(); })
				.dialog({
					autoOpen: false,
					title: '',
					modal: true,
					width: '900',
					maxHeight: '95%',
					resizable:false,
					show: 'fade',
					hide: 'fade',
					open: function(){
						$('.ui-widget-overlay').live("click", function() {
							 $dialog.dialog("close");
						  })
					},
					position: [ 'center','top']
				}).dialog("open");
				
				e.preventDefault();
		});
		$("#radio1").change(
			function(){
				if ($("#radio1:checked").val()){
					$("#summaryvenue").text("Fleet Street");
				}
			}
		);
		$("#radio2").change(
			function(){
				if ($("#radio2:checked").val()){
					$("#summaryvenue").text("Hardman Street");
				}
			}
		);
		$("#radio3").change(
			function(){
				if ($("#radio3:checked").val()){
					$("#summaryvenue").text("Deansgate Locks");
					
				}
			}
		);
		$("#radio4").change(
			function(){
				if ($("#radio4:checked").val()){
					$("#summaryvenue").text("Sackville");
				}
			}
		);
		$("#radio5").change(
			function(){
				if ($("#radio5:checked").val()){
					$("#summaryvenue").text("Fallowfield");
				}
			}
		);
		$("#radio6").change(
			function(){
				if ($("#radio6:checked").val()){
					$("#summaryvenue").text("Wallgate");
				}
			}
		);
		$("#radio7").change(
			function(){
				if ($("#radio7:checked").val()){
					$("#summaryvenue").text("Goose Gate");
				}
			}
		);

	
		$('#bookingformtabs input[name="dateofbirth"]').datepicker({   
			maxDate: new Date(),
			yearRange: '1910:2000',
			dateFormat: 'dd/mm/yy',
			showOtherMonths: true,
			selectOtherMonths: true,
			changeMonth: true,
			changeYear: true
		 });
		$('#bookingformtabs input[name="partydate"]').datepicker({   
			changeMonth: true,
			showOtherMonths: true,
			dateFormat: 'dd/mm/yy',
			minDate: new Date()
		 });
		$('#bookingformtabs input[name="partydate"]').datepicker( "option", "showAnim", "fade" );
		
		$('#bookingformtabs input[name="guestnumber"] ').change(
			function(){
				$("#summaryguests").text($('#bookingformtabs input[name="guestnumber"]').val());
			}
		);
	
		$('#partytimehour').change(
			function(){
				$("#summarypartytime").text($('#partytimehour').val()+ ':'+$('#partytimeminute').val()+' '+$('#partytimeampm').val());
			}
		);
		$('#partytimeminute').change(
			function(){
				$("#summarypartytime").text($('#partytimehour').val()+ ':'+$('#partytimeminute').val()+' '+$('#partytimeampm').val());
			}
		);
		$('#partytimeampm').change(
			function(){
				$("#summarypartytime").text($('#partytimehour').val()+ ':'+$('#partytimeminute').val()+' '+$('#partytimeampm').val());
			}
		);
		$('#bookingformtabs input[name="partydate"]').change(
			function(){
				$("#summarypartydate").text($('#bookingformtabs input[name="partydate"]').val());
			}
		);
		$('#bookingformtabs input[name="budget"]').change(
			function(){
				$("#summarybudget").text($('#bookingformtabs input[name="budget"]').val());
			}
		);
		var inputs = [
			/*'input[name="myfirstname"]',*/
			'input[name="myfirstname"]',
			'input[name="mysurname"]',
			'input[name="dateofbirth"]',
			'input[name="address1"]',
			'input[name="city"]',
			'input[name="county"]',
			'input[name="postcode"]',
			'input[name="phone"]',
			'input[name="email"]',
			'input[name="mobile"]',
			'input[name="partytype"]',
			'input[name="partydate"]',
			'input[name="guestnumber"]',
			'input[name="budget"]',
			'input[name="baarvenue"]:checked'
		]
	
	
		function checkValidation(){
			var valid =	true;
			for(var i in inputs){
				var input = inputs[i];
				if(input != null){
					var val = $(input).val();
					if(val != null){
						if(val.replace(/ /g, '') == ''){
							valid = false;
							$(input).css('border','1px solid #fa0');
							//break;
						} else {
							$(input).css('border','1px solid #555');
						}
					}else{
						valid = false;
						$(input).css('border','1px solid #fa0');
						//break;
					}
				} else {
					valid = false;
					//break;
				}
			}
			if(valid == true){
				$( '#tabs-5 input[type="submit"]' ).button( "option", "disabled", false );
				$( '#tabs-5 .inputerror' ).hide();
				$('.bformmissingfields').hide();
			}else{
				$( '#tabs-5 input[type="submit"]' ).button( "option", "disabled", true );
				$( '#tabs-5 .inputerror' ).show();
				$('.bformmissingfields').show();
			}
		}
		for (var i in inputs){
			$(inputs[i]).keydown( function(){ checkValidation(); });
			$(inputs[i]).blur( function(){ checkValidation(); });
		}
		$('#radio1').change( function(){ checkValidation(); });
		$('#radio2').change( function(){ checkValidation(); });
		$('#radio3').change( function(){ checkValidation(); });
		$('#radio4').change( function(){ checkValidation(); });
		$('#radio5').change( function(){ checkValidation(); });
		$('#radio6').change( function(){ checkValidation(); });
		$('#radio7').change( function(){ checkValidation(); });
		
		$('#radio1').blur( function(){ checkValidation(); });
		$('#radio2').blur( function(){ checkValidation(); });
		$('#radio3').blur( function(){ checkValidation(); });
		$('#radio4').blur( function(){ checkValidation(); });
		$('#radio5').blur( function(){ checkValidation(); });
		$('#radio6').blur( function(){ checkValidation(); });
		$('#radio7').blur( function(){ checkValidation(); });

		checkValidation();
	}
	if($('.baarpage').exists()){
		baarPage();
	}

});