$(document).ready(function(){

	// hide the labels on the "Noes for System designers" enquiry form
	$("form#enquiry div label").css('display', 'none');

	// function to populate a form-field with some default descriptive text
	function populateElement(selector, defvalue) {
	    $(selector).each(function() {
	        if($.trim(this.value) == "") {
	            this.value = defvalue;
	        }
	    });

	    $(selector).focus(function() {
	        if(this.value == defvalue) {
	            this.value = "";
	        }
	    });

	    $(selector).blur(function() {
	        if($.trim(this.value) == "") {
	            this.value = defvalue;
	        }
	    });
	 }

	populateElement('#search', 'Search');

	// system designer enquiry form
	populateElement('#company', 'Company name');
	populateElement('#name', 'Name');
	populateElement('#email', 'Email address');



	// slide in content panel

	// start by making sure the panel is hidden
    $("div#slidedown-panel").animate({ height: "0px", opacity: 0 }, 0 );

    $("div#slidedown-content").fadeOut();

	$("a.slide").attr("href", '/');

	var topPanelHidden = true;
	var topPanelShowing;
	var hasClosed;

	$("a.slide").click(function(){

		// set a variable containing the href of the clicked link
		var loadHref = $(this).attr("href");

		// write the href into the close link
		$("a#close-panel").attr("href", loadHref);
		$("a#close-panel").css('display', 'block');

		// if topPanelHidden is not true, remove class 'selected' from all links, animate height & opacity to 0, fadeout content and hasClosed is true
		if(topPanelHidden != true){
			$('a.slide').removeClass('selected');
			$("a#close-panel").css('display', 'none');
      		$("div#slidedown-panel").animate({ height: "0px", opacity: 0}, 300);
      		$("div#slidedown-content").fadeOut(100); // fade it out quick so no-one spots it!
      		$("a#read-more").fadeOut(100); // same quick fade for the 'read more' link
      		// show Learn More link
			$("a#slider-nav").fadeIn(500);
			// debugging
			// $("div#slidedown-content").prepend("<strong>The height of this div is NOW" + dynamicDivHeight + "</strong>" );
      		// $("div#slidedown-content").empty() // remove any dynamic content
      		hasClosed = true;
		}


		// if topPanelShowing is not loadHref or TopPanelHidden is true
		if(topPanelShowing != loadHref || topPanelHidden == true) {

			topPanelShowing = loadHref;

			// add class to the clicked link
			$(this).addClass('selected');

			// scroll the page up to the top in case user's reading a long panel
		 	// $('body').scrollTo( { top:0 , left:0}, 1000, {easing:'easeInOutCubic'});

			// hide Learn More link
			$("a#slider-nav").fadeOut(100);

			// load in HTML from href
			$("div#slidedown-content").load(loadHref + " #reusable-content", null, function(){


			var dynamicDivHeight = $("div#slidedown-content").outerHeight(); // get the height of the hidden content div


			// debugging
			//$("div#slidedown-content").before("<strong>The height of this div is" + dynamicDivHeight + "</strong>" );


			// animate the container panel's height
      		$("div#slidedown-panel").animate({ height: dynamicDivHeight }, 500);
			// fade the loaded panel in
			$("div#slidedown-panel").animate({ opacity: 1 }, 0 );

			// animate the dynamic content div's opacity and fade it in
			$("div#slidedown-content").animate({ opacity: 1 }, 400, function(){ $("div#slidedown-content").fadeIn(300);});

			// show 'read more' link
			// $("a#read-more").animate({ opacity: 1 }, 400, function(){ $("a#read-more").fadeIn(300);});

			} );



      		hasClosed = false;
		}


		topPanelHidden = hasClosed;

		return false;
    });





	// Fading Advanced Search Options on the homepage
		$("p#search-filters").css('display', 'block');

		$("p#search-filters a").click(function(){
		  $("div#ext-search").animate({'opacity': 'show'}, 500);
		  $(this).css('display', 'none');
	      return false;
		});

		$("a#close-ext-search").click(function(){
		  $("div#ext-search").animate({'opacity': 'hide'}, 100);
		  $("p#search-filters a").animate({'opacity': 'show'}, 500);
	      return false;
		});



	// scroll back to top - smoooooooth
	$('a.backtotop').click(function(){
		 $('body').scrollTo({top:0, left:0}, 400, {easing:'easeInOutCubic'});
         return false;
	});



    // bubble info popups

	$(function () {
	  $('.bubbleInfo').each(function () {
	    // options
	    var distance = 52;
	    var time = 250;
	    var hideDelay = 100;

	    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: 50,
	          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);
	    });
	  });
	});


});