// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults

$(function() {
  //image carousels
  //group latest photos carousel
  if ($("div.group_latest_photos_carousel").length > 0){
    $("div.group_latest_photos_carousel").carousel( { dispItems: 3 } );
  }

  //photo gallery carousel
  if ($("div.photo_gallery_carousel").length > 0){
    $("div.photo_gallery_carousel").carousel( { dispItems: 6, pagination: true } );
  }

  //video gallery carousel
  if ($("div.video_gallery_carousel").length > 0){
    $("div.video_gallery_carousel").carousel( { dispItems: 6, pagination: true } );
  }

  if ($('div.hide').length > 0){
    $('div.hide').click(function() {
      $('div.intro_text').hide();
    });

  }

  //search autocomplete
  $("#q").bind('keyup', function(e){
    var code = (e.keyCode ? e.keyCode : e.which);
    text = $(this)[0].value;
    if ((text.length >= 3) && (code != 13)){
      $.ajax({
          url: "/search/quick",
          type: 'GET',
          processData: false,

          data: '&authenticity_token=' + rails_authenticity_token + '&q=' + text,
          success: function(data) {
            $('#dummy').html(data);
            $('#dummy div').show();

          }
      });
    }
  });


});

$(document).ready(function() {
  
  // sets up the hover image for activity feed items  
  $(".imgHoverMarker").tooltip({
  showURL: false,
  bodyHandler: function() {
    var i = $(this).children()[0]
    var imgsrc = $(i).attr('src');
    return $('<img src="'+imgsrc+'" />');
  }
  });
  
  // registration form form error box
   $('a#hide_error').bind('click', function() {
  	$('.form_error').hide();
	return false;
  })
  
  $('input,textarea').focus( function() {
  $(this).css('border-color', '#006699');
  });
  $('input,textarea').blur( function() {
  $(this).css('border-color','#ccc');
  });

  // facebox popups
  jQuery('a[rel*=facebox]').facebox();
  
  //for lightbox
  jQuery('a[rel*=lightbox]').lightBox({
  	overlayOpacity: 0.7,
	imageLoading: '/images/lightbox-ico-loading.gif',
	imageBtnClose: '/images/lightbox-btn-close.gif',
	imageBtnPrev: '/images/lightbox-btn-prev.gif',
	imageBtnNext: '/images/lightbox-btn-next.gif',
	txtImage: ''
  });
  //lightbox for hair vote-a-thon index page
  //start
  jQuery('a[rel*=lightbox[latest]]').lightBox({
  	overlayOpacity: 0.7,
	imageLoading: '/images/lightbox-ico-loading.gif',
	imageBtnClose: '/images/lightbox-btn-close.gif',
	imageBtnPrev: '/images/lightbox-btn-prev.gif',
	imageBtnNext: '/images/lightbox-btn-next.gif',
	txtImage: ''
  });
  jQuery('a[rel*=lightbox[hairstyle_votes]]').lightBox({
  	overlayOpacity: 0.7,
	imageLoading: '/images/lightbox-ico-loading.gif',
	imageBtnClose: '/images/lightbox-btn-close.gif',
	imageBtnPrev: '/images/lightbox-btn-prev.gif',
	imageBtnNext: '/images/lightbox-btn-next.gif',
	txtImage: ''
  });
  jQuery('a[rel*=lightbox[topten]]').lightBox({
  	overlayOpacity: 0.7,
	imageLoading: '/images/lightbox-ico-loading.gif',
	imageBtnClose: '/images/lightbox-btn-close.gif',
	imageBtnPrev: '/images/lightbox-btn-prev.gif',
	imageBtnNext: '/images/lightbox-btn-next.gif',
	txtImage: ''
  });
  //end
});

//
// LB, 2009-03-16
//
var HairConsultant = {
	
	// divs and containers
	consultant: "#consultant",
	shapes_container: "#shapes",
	complexions_container: "#complexions",
	active_gender: "",	

	// form fields
	radio_gender_female: "#consult_gender_female",
	radio_gender_male: "#consult_gender_male",
	complexion_field: "#consult_complexion",
	shape_field: "#consult_shape",

	// image assets
	image_shapes_female: "hair_consult_shapes_females.jpg",
	image_shapes_male: "hair_consult_shapes_males.jpg",
	image_complexions_female: "hair_consult_complexions_females.jpg",
	image_complexions_male: "hair_consult_complexions_males.jpg",
	image_shapes_width: 88,
	image_complexions_width: 100,

	// names and descriptions (loaded externally)
	complexions: [],
	shapes: [],

	init: function(complexions, shapes){
		this.complexions = complexions;
		this.shapes = shapes;		
		$("<img/>").attr({ "src": "images/" + HairConsultant.image_shapes_female, "style" : "display:none" }).appendTo(this.consultant);
		$("<img/>").attr({ "src": "images/" + HairConsultant.image_complexions_female, "style" : "display:none" }).appendTo(this.consultant);
		$("<img/>").attr({ "src": "images/" + HairConsultant.image_shapes_male, "style" : "display:none" }).appendTo(this.consultant);
		$("<img/>").attr({ "src": "images/" + HairConsultant.image_complexions_male, "style" : "display:none" }).appendTo(this.consultant);
		this.setup_behaviours();
		$(HairConsultant.radio_gender_female).click();
	},
	
	setup_behaviours: function(){
		$(HairConsultant.radio_gender_female + "," + HairConsultant.radio_gender_male).click(function(){
      HairConsultant.active_gender = $(this).val();
			HairConsultant.render_complexions();
			HairConsultant.render_shapes();
		});
	},
	
	render_complexions: function(){
		$(HairConsultant.complexions_container).html("");
		for(var i=0; i < HairConsultant.complexions[HairConsultant.active_gender].length; i++) {
			complexion = HairConsultant.complexions[HairConsultant.active_gender][i];
			bg_pos = HairConsultant.image_complexions_width*(HairConsultant.complexions[HairConsultant.active_gender].length-i);
			oddness = " ";
			if (i%2!=0) { oddness = "odd"; }
			
			$("<li>").attr("id", "complexion-container-"+i).addClass(oddness).appendTo(HairConsultant.complexions_container);

			$("<div>").attr("id", "complexion-desc-" + i).addClass("complexion-desc").appendTo("#complexion-container-"+i);
			$("<strong>").addClass("complexion-name").text(complexion.name).appendTo("#complexion-desc-"+i);			
			$("<p>").text(complexion.desc).appendTo("#complexion-desc-"+i);

			$("<div>").attr({"id": "complexion-"+i, "type": complexion.type, "counter": i }).
								addClass("complexion-graphic complexion-graphic-" + HairConsultant.active_gender).
								css({"background-position": bg_pos + "px 0px"}).
								click(function(){ 
									$(HairConsultant.complexion_field).val( $(this).attr("type") );
									$(HairConsultant.complexions_container+" li").removeClass("selected");
									$("#complexion-container-"+ $(this).attr("counter") ).addClass("selected");
								}).
								appendTo("#complexion-container-"+i);
		}
	},
	
	render_shapes: function(){
		$(HairConsultant.shapes_container).html("");
		for(var i=0; i < HairConsultant.shapes[HairConsultant.active_gender].length; i++) {
			shape = HairConsultant.shapes[HairConsultant.active_gender][i];
			bg_pos = HairConsultant.image_shapes_width*(HairConsultant.shapes[HairConsultant.active_gender].length - i);
			oddness = " ";
			if (i%2!=0) { oddness = "odd"; }
			
			$("<li>").attr("id", "shape-container-"+i).addClass(oddness).appendTo(HairConsultant.shapes_container);

			$("<div>").attr("id", "shape-desc-" + i).addClass("shape-desc").appendTo("#shape-container-"+i);
			$("<strong>").addClass("shape-name").text(shape.name).appendTo("#shape-desc-"+i);			
			$("<p>").text(shape.desc).appendTo("#shape-desc-"+i);

			$("<div>").attr({"id": "shape-"+i, "type": shape.type, "counter": i }).
								addClass("shape-graphic shape-graphic-" + HairConsultant.active_gender).
								css({"background-position": bg_pos + "px 0px"}).
								click(function(){ 
									$(HairConsultant.shape_field).val( $(this).attr("type") );
									$(HairConsultant.shapes_container+" li").removeClass("selected");
									$("#shape-container-"+ $(this).attr("counter") ).addClass("selected");
								}).
								appendTo("#shape-container-"+i);
		}
		
		// now we add the advisor
		//$("<li>").attr("id", "advisor").addClass("advisor odd").appendTo(HairConsultant.shapes_container);
		//$("<div>").addClass("shape-desc").text("Show me how the following face looks like on a mannequin").appendTo("#advisor");
		//$("<div>").addClass("shape-graphic").appendTo("#advisor");
	}
}

// functions for the coda like popups
// Commented until I can get working
// $(function () {
//   $('.bubbleInfo').each(function () {
//     // options
//     var distance = 10;
//     var time = 250;
//     var hideDelay = 500;
// 
//     var hideDelayTimer = null;
// 
//     // tracker
//     var beingShown = false;
//     var shown = false;
//     
//     var trigger = $('.trigger', this);
//     var popup = $('.popup', this).css('opacity', 0);
// 
//     // set the mouseover and mouseout on both element
//     $([trigger.get(0), popup.get(0)]).mouseover(function () {
//       // stops the hide event if we move from the trigger to the popup element
//       if (hideDelayTimer) clearTimeout(hideDelayTimer);
// 
//       // don't trigger the animation again if we're being shown, or already visible
//       if (beingShown || shown) {
//         return;
//       } else {
//         beingShown = true;
// 
//         // reset position of popup box
//         popup.css({
//           top: -100,
//           left: -33,
//           display: 'block' // brings the popup back in to view
//         })
// 
//         // (we're using chaining on the popup) now animate it's opacity and position
//         .animate({
//           top: '-=' + distance + 'px',
//           opacity: 1
//         }, time, 'swing', function() {
//           // once the animation is complete, set the tracker variables
//           beingShown = false;
//           shown = true;
//         });
//       }
//     }).mouseout(function () {
//       // reset the timer if we get fired again - avoids double animations
//       if (hideDelayTimer) clearTimeout(hideDelayTimer);
//       
//       // store the timer so that it can be cleared in the mouseover if required
//       hideDelayTimer = setTimeout(function () {
//         hideDelayTimer = null;
//         popup.animate({
//           top: '-=' + distance + 'px',
//           opacity: 0
//         }, time, 'swing', function () {
//           // once the animate is complete, set the tracker variables
//           shown = false;
//           // hide the popup entirely after the effect (opacity alone doesn't do the job)
//           popup.css('display', 'none');
//         });
//       }, hideDelay);
//     });
//   });
// });