var css = {
  
  stylesheet: " \
    div#next, div#previous { position: fixed; bottom: 0px; left: 0px; height: 8%; width: 8%; background: transparent; text-align: center; vertical-align: center; cursor: pointer; z-index: 8; } \
    div#next a, div#previous a { position: absolute; bottom: 14px; left: 50%; margin: 0px; font-family: 'Lucida Grande', sans-serif; font-weight: normal; font-size: 1.2em; color: rgb(20, 20, 20); color: rgb(237, 28, 36); pointer-events: none; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.25); } \
    div#next { left: auto; right: 0px; } \
  ",
  
  load: function() {
    var style = document.createElement("style");
  	if (style.styleSheet)
  	  style.styleSheet.cssText = this.stylesheet;
  	else
  		style.appendChild(document.createTextNode(this.stylesheet));
  	document.getElementsByTagName("head")[0].appendChild(style);
  }
}

var gallery = {

  count: 0,
  elements: [],
  container: [],
  animating: false,
  
  init: function(elements, container) {
    this.elements = elements;
    this.container = container;
    
    css.load();
    $(this.container).before('<div id="previous"><a href="#">&larr;</a></div>');
    $(this.container).after('<div id="next"><a href="#">&rarr;</a></div>');

    $('html').css('overflow-x', 'hidden');
    $(gallery.container).css('left', '0px');
    
    if($('div#media img').length < 1)
      $('div#next').hide();
    $('div#previous').hide();
    
    this.events();
  },
  
  events: function() {
    $('div#next').click(function(e) {
      e.preventDefault();
      gallery.next();
      return false;
    });
    
    $('div#previous').click(function(e) {
      e.preventDefault();
      gallery.previous();
      return false;
    });
    
    $(document).keydown(function(e) {
      if(e.keyCode == 37 || e.keyCode == 38 || e.keyCode == 39)
        e.preventDefault();
    });
    
    $(document).keyup(function(e) {
      e.preventDefault();
      if(e.keyCode == 37)
        gallery.previous();
      if(e.keyCode == 38 && $('nav#home a').length > 0)
        document.location.href = $('nav#home a').attr('href');
      if(e.keyCode == 39)
        gallery.next();
      if(e.keyCode == 40)
        gallery.start();
    });
  },
  
  next: function() {
    if(!this.animating && this.count < this.elements.length - 1) {
      this.animating = true;
      $(this.container).animate({
        left: 
          parseInt($(this.container).css('left')) - this.floor_width() + 'px'
      }, 650, function() {
        gallery.animating = false;
      });
      $('div#previous').show();
    }
  },
  
  previous: function() {
    if(!this.animating && this.count > 0) {
      this.animating = true;
      $(this.container).animate({
        left: 
          parseInt($(this.container).css('left')) + this.unfloor_width() + 'px'
      }, 650, function() {
        gallery.animating = false;
      });
      $('div#next').show();
    }
  },
  
  start: function() {
    if(!this.animating) {
      this.count = 0;
      this.animating = true;
      $(this.container).animate({
        left: '0px'
      }, 650, function() {
        gallery.animating = false;
      });
      $('div#next').show();
      $('div#previous').hide();
    }
  },
  
  floor_width: function() {
    var element_width = $(this.elements[this.count]).outerWidth(true);
    var container_width = $(this.container).outerWidth() + $('div#media', this.container).width();
    if(this.count < this.elements.length - 1)
      this.count++;
    
    if(container_width + parseInt($(this.container).css('left')) - element_width > $(window).width()) {
      return element_width;
    } else {
      $('div#next').hide();
      this.closing_width = container_width + parseInt($(this.container).css('left')) - $(window).width();
      return this.closing_width;
    }
  }, 
  
  unfloor_width: function() {
    if(this.count > 0)
      this.count--;
      
    if(this.count == 0)
      $('div#previous').hide();
    
    var element_width = $(this.elements[this.count]).outerWidth(true);
    var container_width = $(this.container).outerWidth() + $('div#media', this.container).width();
    
    var window_offset = container_width - $(window).width() + parseInt($(this.container).css('left'));
    
    if(this.closing_width != null) {
      var closing_width = this.closing_width;
      this.closing_width = null;
      return closing_width;
    } else {
      return element_width;
    }
  }
  
}

$(function() {

  // Random image margins
  var imgs = $('div#media img');
  for(var i = 0; i < imgs.length; i++) {
    imgs[i].style.marginLeft = (Math.random() * 30) + 10 + 'px';
  }
  
  // align text block to top of image
  var content_height = parseInt($('div#project-details article').css('height')) / 2;
  var image_height = $(imgs[0]).height() / 2;
  
  var offset = content_height + (image_height * -1);
  
  $('div#project-details article').children().css('top', offset);
  
  // Create gallery
  gallery.init($('section#content h1, div#media img'), $('section#content'));
  
});