var Unselectable = {
 
	enable : function() {
		return false;
	},
 
	disable : function () {
		return true;
	}
 
}


var DanceSpace = {

  zoomColor: '#00223f',

  init: function(){

    var canvas = $("#canvas");

    DanceSpace.centreX = Math.round(canvas.outerWidth()/2);
    DanceSpace.centreY = Math.round(canvas.outerHeight()/2);

    DanceSpace.paper = new Raphael( canvas.get(0) , canvas.outerWidth()+"px",  canvas.outerHeight()+"px" );

    DanceSpace.drawZoom();

    DanceSpace.setupScrollers();

    DanceSpace.initGallery();
    
    
  },

  drawZoom: function(){

    var centreX = DanceSpace.centreX;
    var centreY = DanceSpace.centreY;

    var centreString = centreX+" "+centreY;
    
    var paper = DanceSpace.paper;
    paper.clear();
    
    $(".zoom").each(function(){

      var zoomBox = $(this);
      
      var width = zoomBox.outerWidth();
      var height = zoomBox.outerHeight();
      
      var position = zoomBox.position();
      
      var corners = [
        { x:position.left, y:position.top, string:position.left+" "+position.top }, //topLeft
        { x:(position.left+width), y:position.top, string:(position.left+width)+" "+position.top }, //topRight
        { x:(position.left+width), y:(position.top+height), string:(position.left+width)+" "+(position.top+height) }, //bottomRight
        { x:position.left, y:(position.top+height), string:position.left+" "+(position.top+height) } //bottomLeft
      ];
      
      if(position.top < centreY && position.left < centreX) {
        if(corners[1].x > centreX)
          corners.splice(1, 1); //delete topRight
        else if(corners[3].y > centreY)
          corners.splice(3, 1); //delete bottomLeft
        corners.splice(0, 1); //delete topLeft
      } else if(position.top > centreY && position.left > centreX) {
        corners.splice(2, 1); //delete bottomRight
        corners.splice(0, 1); //delete topLeft
      } else if(position.top < centreY && position.left > centreX) {
        if(corners[2].y > centreY) 
          corners.splice(2, 1) //delete bottomRight
        else
          corners.splice(3, 1) //delete bottomRight
        corners.splice(1, 1); //delete topRight
      } else if(position.top > centreY && position.left < centreX) {
        if(corners[1].x > centreX) {
          corners.splice(3, 1) //delete bottomLeft
          corners.splice(2, 1) //delete bottomRight
        } else {
          corners.splice(3, 1); //delete topRight
        }
      }
        
      var pathString = "M "+centreString;
      for(var i = 0; i<corners.length; i++){
        pathString += " L "+corners[i].string;
      }
      pathString += " z";
      
      var path = paper.path(pathString);

      path.attr("fill", DanceSpace.zoomColor );
      path.attr("stroke-width", 0);
      path.attr("stroke", "none");
      
    });
    
  },

  setupScrollers: function(){

    DanceSpace.selectionBlocker = $('<div class="selection-blocker"></div>');
    DanceSpace.selectionBlocker.css({ opacity:0, display:"none" });
    $("body").append(DanceSpace.selectionBlocker);
    
    $(".scroller").each(DanceSpace.setupScroller);
  },

  setupScroller: function(){

    var scroller = $(this);

    var offset = 0;
    var scrollSpeed = 5;
    var targetScroll = NaN;
    

    var height = (scroller.innerHeight()-20);
    var width = (scroller.innerWidth()-20);
    
    scroller.children().wrapAll('<div class="content"></div>');
    scroller.children().wrapAll('<div class="content-container"></div>');

    var contentContainer = scroller.find(".content-container");
    var content = scroller.find(".content");
    
    var scrollBacking = $('<div class="scroll-backing"></div>');
    scrollBacking.css({height: (height - 6)+"px"});
    
    var scrollBar = $('<div class="scroll-bar"></div>');
    scrollBar.css({ height: Math.round(height * height/content.outerHeight())+"px" });
    scrollBacking.append(scrollBar);
    
    scroller.append(scrollBacking);

    contentContainer.css({ height: height+"px", width: (width - scrollBacking.outerWidth() - 10 )+"px" });

    var maxScroll = contentContainer.height() - content.height();

    
    var scrollTo = function(o, instant){
      o = Math.abs(o);
      offset = -o;
      if (offset < maxScroll) {
        offset = maxScroll;
      }
      if(targetScroll == offset) return;
      targetScroll = offset;
      
      var ratio = offset / maxScroll;
      
      content.stop();
      scrollBar.stop();

      var contentTarget = {top:offset+"px"};
      var scrollBarTarget = {top:((scrollBacking.innerHeight()-scrollBar.height())*ratio)+"px"}
      if(instant){
        content.css(contentTarget);
        scrollBar.css(scrollBarTarget);
      } else {
        content.animate(contentTarget, "fast", function(){
          targetScroll = NaN;
        });
        scrollBar.animate(scrollBarTarget, "fast");
      }
      
    }

    scroller.unbind();
    scroller.mousewheel(function(event, delta) {
      var target = offset+(delta*scrollSpeed*3);
      if(target > -1) target = 0;
      scrollTo(target);
      return false;
    });

    var mousedown = function(event){
      mousemove(event);
      document.onmousedown = Unselectable.enable;
      $(document).mousemove(mousemove);
      return false;
    }
    
    var mousemove = function(event){
      var ratio = Math.max(event.pageY-scrollBacking.offset().top, 0) / scrollBacking.height();
      scrollTo( (contentContainer.height() - content.height()) * ratio, true );
      return false;
    }

    var mouseup = function(event){
      document.onmousedown = Unselectable.disable;
      $(document).unbind('mousemove', mousemove);
      return false;
    }
    
    scrollBacking.mousedown(mousedown);
    $(document).mouseup(mouseup);
    
  },

  initGallery: function(){

    var display = $("#image-holder");

    var thumbnails = $("#image-thumbnails img");

    thumbnails.each(function(){

      var thumbnail = $(this);
      var loaded = false;
      
      var src = thumbnail.attr("src");
      thumbnail.attr("src", "");

      thumbnail.css({opacity:0});
      
      var displayThumbnail = function(){
        var oldImages = display.find("img");
        oldImages.stop().animate({opacity:0}, "fast", function(){
          oldImages.remove();
        });
        var thumb = $("<img />");
        thumb.attr('src', src);
        thumb.css({opacity: 0});
        display.append(thumb);
        thumb.animate({opacity:1});
      }
      
      thumbnail.load(function(){
        loaded = true;
        thumbnail.animate({opacity:1});
        if(thumbnail.data("displayOnLoad")) displayThumbnail();
      });
      
      thumbnail.click(function(){
        thumbnail.data("displayOnLoad", false);
        if(loaded) 
          displayThumbnail();
        else
          thumbnail.data("displayOnLoad", true);
      });

      thumbnail.mouseover(function(){
        if(loaded) thumbnail.animate({opacity: 0.8});
      });
      thumbnail.mouseout(function(){
        if(loaded) thumbnail.animate({opacity: 1});
      });

      thumbnail.attr("src", src);
      
    });

    $(thumbnails[0]).click();
    
  }

}




$(document).ready(function(){
  
  DanceSpace.init();
  
})