$(function() {

// moved over to css hack... :) 
//  $.fn.setAllToMaxHeight = function(){
//  return this.height( (Math.max.apply(this, $.map( this , function(e){ return $(e).height() }) ))+ 200 );
//  }
//{  $('.unevenheights').setAllToMaxHeight();

  // a slightly more complicated function using more plain jS... turned off
  var initAutoExpanders = function (domElement) {
    if (!domElement) { var domElement = document; }
    $(".auto-expand", $(domElement)).each(function () {
      var classNames = $(this).get(0).className.split(" ");
      var expandClass;
      $.each(classNames, function () {
        if (this.substr(0, 7) == "expand-") {
          expandClass = this.substr(7);
        }
      });
      var expandingElement = $("." + expandClass, $(this).parent());
      expandingElement.css('height','60px').css('overflow','hidden');
      if (parseInt(expandingElement.css("height")) + 5 < expandingElement.get(0).scrollHeight) {
        // Expander is useful here.
        $(this).css("display", "block");
        $(this).click(function () {
          expandingElement.animate({
            height: expandingElement.get(0).scrollHeight + "px"
          });
          $(this).slideUp('slow');
        });
      } else {
        $(this).hide();
      }
    });
  };  
  //  initAutoExpanders();
  //  initAutoExpanders($("#where-I-will-select-stuffs"));

  // === portfolio scrolling - will refactor the 2 functions (prev/next) into 1, very soon!
	var $scrollable = $("#scrollable");
  var $prevPortLink = $("#prev-portfolio");
  var $nextPortLink = $("#next-portfolio"); 

  var $moveBy = 975;
  var $frameLeft = 0;
  var $frameNumber = 1;

  var maxClicks = 4;  
  $prevPortLink.hide();
  
  var goToPrev = function(){
    $newFrameNumber = (($frameNumber/1) - 1);
    $newLeft = (($frameLeft/1) - $moveBy);
    $newLeftAttr = $newLeft+"px";

    if ($newFrameNumber > 0) {
      $("#scrollable").animate({left: "-"+$newLeftAttr},1600);
      $frameLeft = $newLeft;
      $frameNumber = $newFrameNumber;
      hidePrevOrNext($frameNumber);
    }
  }

  var goToNext = function(){
    $newFrameNumber = (($frameNumber/1) + 1);
    $newLeft = (($frameLeft/1) + $moveBy);
    $newLeftAttr = $newLeft+"px";

    if ($newFrameNumber < maxClicks) {
      $("#scrollable").animate({left: "-"+$newLeftAttr},1600);
      $frameLeft = $newLeft;
      $frameNumber = $newFrameNumber;
      hidePrevOrNext($frameNumber);
    }
  }
  
  var hidePrevOrNext = function ($frameNumber){
    if ($frameNumber == 1) {
      $prevPortLink.fadeOut();  
    } else if ($frameNumber == (maxClicks - 1)){
      $nextPortLink.fadeOut(); 
    } else {
      $prevPortLink.fadeIn();      
      $nextPortLink.fadeIn();
    }  
  }

  $prevPortLink.click(goToPrev);
  $nextPortLink.click(goToNext);

   
  // ===  scrolling for the sections down
   var scrollToNextSection = function($nextSection){
     $('html, body').animate({
     scrollTop: $($nextSection).offset().top
     }, 500);
   }

   $(".scroll-down a").click(function(){
     var $nextSection = $(this).parent("p").parent("section").next("section");
     scrollToNextSection($nextSection);
     return false;
   });
   
   
  // animate image opacity... could be done with WebKit, but I'd rather use jQuery for more browsers
  var $dimmedImages = $("#scrollable li img,#flickr-photos img");
  $dimmedImages.css({"opacity": 0.6});
  // Need to look into how I should best split this up into two functions called alternatively!
  $dimmedImages.hover(function(){
    $(this).stop().animate({"opacity": 1});
  },function(){
      $(this).stop().animate({"opacity": 0.6});
  });
  
  // ===  back to the top of the page scroll
  var ScrollToTopPage = function(){
    $('html, body').animate({
    scrollTop: $("body").offset().top
    }, 500);
    return false;
  }

  $('#back-to-top').click(ScrollToTopPage);

}); // end jQuery