var transform;
function transform_photo() {
	var current_view = $('.before_and_after_viewer .views.current');
	var before_photo = current_view.children('.before');
	
	if (!current_view.hasClass('transforming')) {
		return;
	}
	
	if (before_photo.is(':visible')) {
		before_photo.fadeOut(1000, function () {
			before_photo.css('z-index', 5);
		});
	} else {
		before_photo.css({'opacity': 0.1, 'z-index': 20}).show(function () {
			before_photo.animate({'opacity': 0.999}, 1000);
		});
	}
	
	transform = setTimeout(function () {
		transform_photo();
	}, 4000);
}

var BeforeAndAfter = {
  MAX_THUMBNAIL_HEIGHT: 100,
  
	/* Before and After View height adjustment
	----------------------------------------------------------------------- */
	adjustViewerHeight: function () {
		var champ = [];
		$('.views.current img').each(function () {
			if (champ.length === 0 || (champ.length === 1 && champ.height() < $(this).height())) {
				champ = $(this);
			}
		});
		$('.views.current').css('height', champ.height() + 'px');
		$('#before_and_after_scroller').css('bottom', 0);
	},
	
	centerThumbnailsVertically: function () {
	  $('#before_and_after_scroller .items li img').each(function () {
	    if ($(this).height() < BeforeAndAfter.MAX_THUMBNAIL_HEIGHT) {
	      var marginTop = (BeforeAndAfter.MAX_THUMBNAIL_HEIGHT - $(this).height()) / 2;
	      $(this).css('margin-top', marginTop);
	    }
	  });
	}
};

$(document).ready(function () {
  // Style out the buttons
  $('.button').corner('3px').hover(function () {
    $(this).css('color', '#6C2163');
  }, function () {
    $(this).css('color', '#59174d');
  });
  
  $('.view_toggler a').corner('keep 5px');
  
  /* Before and after procedures dropdown
	----------------------------------------------------------------------- */
	$('#before_and_after_procedure_select').click(function (event) {
	  event.stopPropagation();
	  var $dropDown = $(this).children('.options');
	  if (!$dropDown.is(':visible')) {
	    $dropDown.slideDown();
	  } else {
	    $dropDown.slideUp().hide();
	  }
	});
	
	// Observe for clicks outside of the drown down and close it, if visible
	$('body').click(function () {
	  var $dropDown = $('#before_and_after_procedure_select .options');
	  if ($dropDown.length && $dropDown.is(':visible')) {
	    $dropDown.slideUp().hide();
	  }
	});

  
	/* Before and after viewer transformation button
	----------------------------------------------------------------------- */
	$('#view_trans_button').click(function (event) {
		event.preventDefault();
		var current_view = $(this).parent().siblings('.current');
		var photos = current_view.children('img');
		var dx = (current_view.width() - photos.first().width())/2;
		
		if (current_view.hasClass('transforming')) {
			current_view.removeClass('transforming');
			photos.stop(true, true);
			
			photos.show().animate({'opacity': 0.3}, 200);
			photos.filter('.before').animate({'left': '-='+dx+'px', 'opacity': 1}, 'slow');
			photos.filter('.after').animate({'right': '-='+dx+'px', 'opacity': 1}, 'slow');
			$(this).text("View transformation");
			clearTimeout(transform);
		} else {
			current_view.addClass('transforming');
			photos.filter('.before').animate({'left': '+='+dx+'px'}, 'slow');
			photos.filter('.after').animate({'right': '+='+dx+'px', 'opacity': 0.1}, 'slow');
			photos.filter('.after').animate({'opacity': 1}, 'fast');
			$(this).text("View side by side");

			transform = setTimeout(function () {
				transform_photo();
			}, 700);
		}
	});
	
	/* Before and After Switch Views Handler
	----------------------------------------------------------------------- */
	if ($('.before_and_after_viewer').length) {
		var currentView = $('.before_and_after_viewer .photos .views.current').attr('class').split(' ');
		var currentViewClass = false;
		$.each(currentView, function (index, value) {
			if (value.indexOf('view_') >= 0) {
				currentViewClass = value;
			}
		});
		
		if (currentViewClass) {
			$('.view_toggler li a.' + currentViewClass).addClass('current');
		}
	}
	
	$('.view_toggler li a').click(function () {
		var viewClass = $(this).attr('href').substring(1),
				viewElem	= $('.before_and_after_viewer .photos .views.' + viewClass);
				
		if ($(this).hasClass('current')) {
			return;
		}
		
		$('.view_toggler li a').removeClass('current');
		$(this).addClass('current');
		
		$('.before_and_after_viewer .photos .views.current').fadeOut(function () {
			$(this).removeClass('current');
			viewElem.fadeIn().addClass('current').css('height', viewElem.children('img').first().height() + 'px');
		});
	});
	
	/* Before and After scroller
	----------------------------------------------------------------------- */
	if ($('#before_and_after_scroller').length) {
		var scrollable  = $("#before_and_after_scroller").scrollable({api: true});
		var activeIndex = 0;
		$('#before_and_after_scroller ul li a').each(function (i, elem) {
			if (elem.hash === window.location.hash) {
				$(elem).parent().addClass('active');
				activeIndex = i;
			}
		});
		scrollable.seekTo(activeIndex);
	}
	$('#before_and_after_scroller ul.items a').css('opacity', '0.5');
	$('#before_and_after_scroller ul.items a').hover(function () {
	  $(this).css('opacity', '1');
	}, function () {
	  $(this).css('opacity', '0.5');
	});
	
	/* Finance calculator
	----------------------------------------------------------------------- */
	if ($('#finance_calc').length) {
	  $('#finance_calc form').submit(function (event) {
	    event.preventDefault();
	    $.get($(this).attr('action'), $(this).serialize(), function (data) {
	      var response = $(data).find('form').nextAll();
	      $('#finance_calc .result').empty().append(response);
	      $('#finance_calc .result').children('.paymentCalcTable').first().nextAll().remove();
	    }, 'html');
	  });
	}
	
	/* Mailing list email field
	----------------------------------------------------------------------- */
	$('#email').focus(function () {
	  if ($(this).val() == $(this).attr('data-default')) {
	    $(this).val('');
	  }
	}).blur(function () {
	  if ($(this).val() == '') {
	    $(this).val($(this).attr('data-default'));
	  }
	});
	
	/* Procedures current link highlighting
	----------------------------------------------------------------------- */
	var currentUrlTitle = $('.page.procedures #main').attr('rel');
	$('.page.procedures #main .quote_container .column a').each(function () {
	  if ($(this).attr('href').indexOf(currentUrlTitle) !== -1) {
	    $(this).addClass('current');
	  }
	});
});

$(window).load(function () {
  if ($('.before_and_after_viewer').length) {
    BeforeAndAfter.adjustViewerHeight();
    BeforeAndAfter.centerThumbnailsVertically();
  }

  $('h2, a, h4').each(function () {
    var origHTML = $(this).get(0).innerHTML;
    $(this).get(0).innerHTML = origHTML.replace('®', '<sup>&reg;</sup>');
  });
});


/* Google Maps
----------------------------------------------------------------------- */
$(window).load(function () {
	// Documentation for custom markers with window displays:
	// http://code.google.com/apis/maps/documentation/overlays.html#Custom_Icons
	if (typeof GBrowserIsCompatible === 'function') {
	  if (GBrowserIsCompatible()) {
	    var map = new GMap2(document.getElementById("map_canvas"));
   
      function createMarker(point,html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        return marker;
      }
			
      var point = new GLatLng(40.791257,-96.698401);
			var html = "<div style=\"width:250px\"><strong>The Lincoln Aesthetic Surgical Institute</strong><br>2222 S 16th Street Suite 430<br>Lincoln, Nebraska 68502<br><a href=\"http://maps.google.com/maps/place?cid=13622856703743825432&q=2222+S+16th+Street+Suite+430,+Lincoln,+Nebraska+68502&hl=en&cd=1&cad=src:pplink&ei=OclFTMW8HZGUoATQjd3sDw&sig2=nfM6Koh5vf2a_vpZmsq-Jg\">Get Directions</a></div>";
      var marker = createMarker(point, html);
			map.setCenter(point, 15);
      map.addOverlay(marker);
			marker.openInfoWindowHtml(html);
      
	  }
	}
});

$(window).unload(function () {
	if (typeof GUnload === 'function') {
		GUnload();
	}
});