var RIGHTCOLUMN_WIDTH = 468;
var THUMB_HEIGHT = 44;
var NUM_THUMBROWS;

var scrollRightcolumn = function(offset, fnComplete) {
  if (parseInt ($('div#rightcolumn').css('top')) == offset) {
    fnComplete();
    return true;
  };
  $('div#rightcolumn').stop(true, true).animate({
    top: '' + offset
  }, {
    duration: 2000,
    specialEasing: {
      top: 'easeInOutElastic',
    },
    complete: function() {
      if (fnComplete) fnComplete();
    }
  });
}

var hideLeftPicture = function(showloader) {
  if (showloader) {
    $('#leftimage').attr('src', 'images/loading.gif');
    $('#leftimage').attr('alt', 'loading...');
  } else {
    $('#leftimage').attr('src', 'images/blank.jpg');
    $('#leftimage').attr('alt', 'loading...');
  }
}

// changes left picture and takes care of all resizes
var setLeftPicture = function(src, width, height, showloader, fnComplete) {
  leftImage = new Image();
  $(leftImage).load(function() {
    $('#leftimage').attr('src', leftImage.src);
    $('#leftimage').hide();
    $('#leftimage').fadeIn();
    animateContentframe(width ? width : leftImage.width, height ? height : leftImage.height, function() {
      if (fnComplete) fnComplete();
    });
  });
  leftImage.src = src;
}

// helper method
var animateContentframe = function(width, height, fnComplete) {
  var speedW = Math.abs($('div#frame').width() - RIGHTCOLUMN_WIDTH - width);
  var speedH = Math.abs($('div#frame').height() - height);
  $('div#wrapper').animate({
    width: (width + RIGHTCOLUMN_WIDTH + 20)
  }, {
    duration: speedW * 5,
    specialEasing: {
      width: 'easeOutSine',
    }
  });
  $('div#frame').animate({
    width: (width + RIGHTCOLUMN_WIDTH)
  }, {
    duration: speedW * 5,
    specialEasing: {
      width: 'easeOutSine',
    }
  });
  $('div#frame').animate({
    height: '' + height
  }, {
    duration: speedH * 10,
    specialEasing: {
      height: 'easeOutElastic',
    },
    complete: function() {
      if (fnComplete) fnComplete();
    }
  });
}

var navigateAnchor = function (anchor) {
  document.location.hash = anchor;
  $('input.anchor').val(anchor);
  var id = parseInt(anchor.substring(9));
  if (anchor.beginsWith("#intro")) {
    hideLeftPicture(false);
    scrollRightcolumn(0, function() {
      setLeftPicture('images/shera.jpg');
    });
  }
  // show gallery page
  if (anchor.beginsWith("#gallery")) {
    $('div#section2 div.titledesc div').html('');
    if (id && id > 0) {
      hideLeftPicture(true);
      var thumbClicked = $('[data-id=' + id + ']');
      $('div#section2 div.titledesc').attr("data-thumbid", id);
      $('div#section2 div.title').html(thumbClicked.find('a').attr('title'));
      $('div#section2 div.description').html(thumbClicked.attr('data-description'));
      $("div#section2 div.titledesc").hide();
      scrollRightcolumn(-304, function() {
        setLeftPicture(thumbClicked.attr("data-path"), undefined, undefined, true, function() {
          // adjust textdesc position
          var shiftdown = $('div#frame').height() - 35 - THUMB_HEIGHT * NUM_THUMBROWS - $("div#section2 div.titledesc").height();
          if (shiftdown < 0) shiftdown = 0;
          $("div#section2 div.titledesc").css("top", shiftdown);
          $("div#section2 div.titledesc").show();
        });
      });
    } else {
      hideLeftPicture(false);
      scrollRightcolumn(-304, function() {
        setLeftPicture('images/blank.jpg', 440, 310);
      });
    }
  }
  // show pierkespark page
  if (anchor.beginsWith("#project")) {
    var id = parseInt(anchor.substring(9));
    if (id && id > 0) {
      hideLeftPicture(true);
      var thumbClicked = $('[data-id=' + id + ']');
      scrollRightcolumn(-1008, function() {
        setLeftPicture(thumbClicked.attr("data-path"), undefined, 450, true);
      });
    } else {
      hideLeftPicture(false);
      scrollRightcolumn(-1008, function() {
        setLeftPicture('images/blank.jpg', 450, 450)
      });
    }
  }
  // show contact page
  if (anchor.beginsWith("#contact")) {
    hideLeftPicture(false);
    scrollRightcolumn(-1512, function() {
      setLeftPicture('images/contact.jpg')
    });
  }
}

// load all events
$(document).ready(function() {
  NUM_THUMBROWS = parseInt ($('#section2 div.thumb').size() / 10) + 1;
  // thumb actions
  $('div#section2 div.thumb a').click(function() {
    navigateAnchor("#gallery_" + $(this).parent().attr("data-id"));
    return false;
  });
  $('div#section3 div.thumb a').click(function() {
    navigateAnchor("#project_" + $(this).parent().attr("data-id"));
    return false;
  });
  // add menu click events
  $('a#lnk1').click(function() {
    navigateAnchor("#intro");
    return false;
  });
  $('a#lnk2').click(function() {
    navigateAnchor("#gallery");
    return false;
  });
  $('a#lnk3').click(function() {
    navigateAnchor("#project");
    return false;
  });
  $('a#lnk4').click(function() {
    navigateAnchor("#contact");
    return false;
  });
  // process anchor information
  if (document.location.hash) {
    navigateAnchor(document.location.hash);
  }
  // show login
  $('#password').watermark('paswoord', {className: 'watermark'});
  $('div#loginformwrapper').mouseover(function() {
    if (!this.animateBusy) {
      $(this).animate({
        top: '-10px'
      });
    }
    this.animateBusy = true;
  });
  // hide login
  $('input#btnCancel').click(function() {
    $('div#loginformwrapper').animate({
      top: '-80px'
    }, {
      complete: function() {
        this.animateBusy = false;
      }
    });
  });

});