/* Navigation Selector */
$(document).ready(function(){
	smilemn.nav_selector();
	
	$('li.v-card-item').each(function(){
		smilemn.vcard_binder(this);
	});
	
	$(window).resize(function(){
		// this will reposition the navigation selector relative to the changes in the
		// window size
		var $selector	= $('#navigation-selector');
		var $selected	= $('#navigation li.selected');
		var w1				= ($selected.width() / 2);
		var w2				= ($selector.width() / 2);
		var offsets		= {
			left	:	($selected.position().left + (w1 - w2))
		};
		
		$selector.css({ 'left' : offsets.left });
	});
	
	// Load the first initial image
	smilemn.image_rotator();
	
	// Now schedule the image rotator to run
	// on a 10 second interval.
	window.setInterval(smilemn.image_rotator, 10000);
	
	$('#schedule_appointment_form').dialog({
		modal 		: true,
		autoOpen 	: false,
		width			: 460
	});
	//$('#schedule_appointment_form').dialog('open');
	$('#schedule_appointment_a').click(function(){
		$('#schedule_appointment_form').dialog('open');
		return(false);
	});
	
	$('#schedule_appointment_form .form-actions a').click(function(){
		$('#schedule_appointment_form').dialog('close');
		return(false);
	});
	
	$('#schedule_appointment_form form').bind('submit', function(){
		smilemn.send_appointment_request(this);
		return(false);
	});
	
	$('.ui-dialog a').live('click', smilemn.dialog_navigation);
});

var smilemn	= window.smilemn || {};

// used for remote calls
// remote calls WILL NOT WORK if this is not set.
smilemn.base_uri = '';

/*
 * Send Appointment Email
 * ************************************ */
smilemn.send_appointment_request = function(form){
	//$a_tag	= $('#schedule_appointment_a');
	$this		= $(form);
	url			= $this.attr('action');  //$a_tag.attr('href');
	
	if(smilemn.base_uri.length > 0)
		$.ajax(smilemn.base_uri + url, { 
			dataType 	: 'script', 
			data			: $this.serialize(),
			type			: 'POST'
		});
}
smilemn.dialog_navigation = function(){
	$this	= $(this);
	url		= $this.attr('href');
	
	if(smilemn.base_uri.length > 0){
		$.ajax(smilemn.base_uri + url, { dataType : 'script' });
		return false;
	}
}

/* Image Rotator
 * Rotates images on the homepage
 * ************************************ */
smilemn.image_rotator = function(){
	if(smilemn.base_uri.length > 0)
		$.ajax(smilemn.base_uri + 'remote/images.php',{	dataType : 'script'	});
}

smilemn.nav_selector = function(){
	var $selector 	= $('#navigation-selector');
	var $selected	= $('#navigation li.selected');
	var $a_tags		= $selected.parent().find('a');
	var $light		= $selector.find('.light');
	var w1			= ($selected.width() / 2);
	var w2			= ($selector.width() / 2);
	var offsets		= {
		left : ($selected.position().left + (w1 - w2)),
		top  : $selected.position().top
	}
	
	$selector.css({
		'top'  : offsets.top,
		'left' : -100
	});
	
	$selector.animate({ 'left' : offsets.left }, 1000, 'easeOutBack', function(){
		$light.fadeIn();
	});
	
	// we are going to catch the click event for the navigation items so that
	// we can properly animate out before loading the new page.
	$a_tags.bind('click', function(){
		// fade the selector out entirely before continueing
		var $this = $(this);
		
		$selector.fadeOut(function(){
			$selector.css({ 'left' : -90 });
			window.location = $this.attr('href');
		});
		return(false);
	});
}

smilemn.vcard_binder = function(el){
	$trigger	= $(el).find('.name a');
	
	$trigger.live('click', function(){
		$li	= $(this).parents('li');
		$vcard	= $li.find('.v-card');
		
		if($vcard.is(':visible')) $vcard.slideUp(100);
		else $vcard.slideDown(100);
	});
}

/* Gallery Features 
 * Author: JD Hendrickson
 *
 ************************************* */
smilemn.gallery = window.smilemn.gallery || {}; // Setup the namespace

/* The build method will render the approriate HTML and behaviours
 * for the gallery feature.
 *
 ************************************* */
smilemn.gallery.build = function(el){
	var $this			= $(el);	// this is the wrapper <div>
	var $stage		= $this.find('.gallery-stage');
	var $chooser	= $this.find('.gallery_carousel_ul');
	
	// we need to add clearfix to account for float elements
	$stage.addClass('clearfix');
	
	$chooser.find('li').each(function(){
		var $li = $(this);
		var $a	= $li.find('a');
		var dir	= $a.attr('data-root');
		var $img	= $(document.createElement('img'));
		
		// load the thumbnail and replace the a tag content
		$img.attr('src', String.format('image_sets/{0}/thumb.png', dir));
		$a.prepend($img);
		
		// bind to the thumbnail <a> tag the action to load that image set
		$a.live('click', function(){
			smilemn.gallery.load_image_set(this);			
			return(false);
		});
	});
	
	// Carousel Features
	// Based on example provided at: http://web.enavu.com/tutorials/making-an-infinite-jquery-carousel/	
	//move the last list item before the first item. The purpose of this is if the user clicks previous he will be able to see the last item.
	for(var i = 0; i < 3; i++)
		$chooser.find('li:first').before($chooser.find('li:last'));
		
	//when user clicks the image for sliding right
	$this.find('.gallery_carousel_right_scroll').click(function(){
		// get the width of the items ( i like making the jquery part dynamic, 
		// so if you change the width in the css you won't have o change it here too )
		var item_width = ($chooser.find('li').outerWidth() + 5) * 3;
		
		// calculate the new left indent of the list
		var left_indent = parseInt($chooser.css('left')) - item_width;
		
		// make the sliding effect using jQuery's Animate() method
		$chooser.animate({ 'left' : left_indent },			
			function(){
				// Get the first list item and put it after the last item
				// (that's how the "infinite" effect is made)
				for(var i = 0; i < 3; i++){
					$chooser.find('li:last').after($chooser.find('li:first'));
				}				
				
				// And get the left indent to the default -210px
				$chooser.css({ 'left' : '-314px' });
			});
	});
	
	// When the user clicks the image for sliding left
	$this.find('.gallery_carousel_left_scroll').click(function(){
		var item_width	= ($chooser.find('li').outerWidth() + 5) * 3;
		var left_indent	= parseInt($chooser.css('left')) + item_width;
		
		$chooser.animate({ 'left' : left_indent },
			function(){
				// When sliding left we are moving the last item before the first item
				for(var i = 0; i < 3; i++)
					$chooser.find('li:first').before($chooser.find('li:last'));
								
				// Reset the left indent
				$chooser.css({ 'left' : '-314px' });
			});
	});
	
	// Load the initially selected item
	smilemn.gallery.load_image_set($('.gallery_carousel_ul li.selected a'));
}

smilemn.gallery.load_image_set = function(image_set){
	var $selected 			= $(image_set);
	var $stage					= $selected.parents('#gallery_box').find('.gallery-stage');
	var	$stage_wrapper	= $stage.find('.stage-wrap');
	var $before					= $stage.find('.before');
	var $after					= $stage.find('.after');
	var dir							= $selected.attr('data-root');
	var before_img			= $(document.createElement('img'));
	var after_img				= $(document.createElement('img'));
	var $description		= $selected.next();
	var $d_stage				= $selected.parents('#gallery_box').find('.gallery_more_info_stage');
	
	// We need to clear out any description boxes that are currently being
	// displayed on the screen before rendering the currently selected
	// description box.
	var $old_selected_li	= $('li.selected');
	var $old_description	= $('span.description-box');
	$old_description.hide().removeClass('description-box');
	$old_selected_li.append($old_description);
		
	$description.addClass('description-box');
	$description.hide();
	$d_stage.html($description);
	$description.show();
		
	before_img.attr('src', String.format('image_sets/{0}/before.png', dir));
	after_img.attr('src', String.format('image_sets/{0}/after.png', dir));
	
	$stage_wrapper.fadeOut(function(){
		$before.html(before_img);
		$after.html(after_img);
		$(this).fadeIn();
	});			
	
	$selected.parent().addClass('selected');			
	$selected.parent().siblings('.selected').removeClass('selected');
}