var hash = location.hash;

// Creat onhashchange event.
Element.Events.hashchange = {};

/**
 * Menu on the right side of the page.
 */
var Menu = new Class({
  attach: function(){
    // Attach menu background image animations.
    $$("#menu li a").each(function(element){
      element.fx = new Fx.Tween(element, {
          'link' : 'cancel',
          'transition':'sine:out',
          'duration' : 'normal'});
      
      element.fx.start('background-position', '-400px 0px');
      
      element.addEvent('mouseenter', function(event) {
        element.fx.start('background-position', '0px 0px');
      });
      element.addEvent('mouseleave', function(event) {
        element.fx.start('background-position', '-400px 0px');
      });
    });
  }
});

/**
 * View Slider.
 */
var Slider = new Class({
  hash: null,
  scroller: null,
  attach: function(){
    var slider = this;
    
    
    // Poll hash changes and fire onhashchange event.
    (function(){    
      if(slider.hash !== location.hash) {
        slider.hash = location.hash;
        slider.slide();
      }
    }).periodical(300); 
    
    // Create view scroll tween.
    this.scroller = new Fx.Tween('views');
  },
  
  slide: function(){  

    var views = $('views');
    if (!views){
      return;
    }

    var id = location.hash.substr(1);
    var view = $("view-" + id);
    if (!view){
      return;
    }

    $$('.label').removeClass('selected');
    
    if ($('label-' + id))
      $('label-' + id).addClass('selected');
    
    this.scroller.start('left', "-" + view.getStyle("left"));
    
    $$('.visual').setStyle('display', 'none');
    if ($('visual-' + id)) {
      $('visual-' + id).setStyle('display', 'block');
    }
  }
});

/**
 * Viewer.
 */
var Viewer = new Class({
  markers: {},
  attach: function(){
    // Create markers.
    var visual = $("visual");
    var size = visual.getSize();
    
    var i = 0;
    
    if (visual) {
      for (var id in this.markers) {
        var marker = new Element("div", {"id": "marker-" + id, "class": "marker"});
        var label = new Element("a", {"href": "#" + id, "class": "label", "id": "label-" + id});
        
        if (i == 0) {
          label.addClass("selected");
        }
        
        marker.grab(label);
        visual.grab(marker);
        label.set('text', this.markers[id].label);
        
        var morph = this.markers[id]['morph'] = new Fx.Morph("marker-" + id, {
            'link': 'cancel', 
            'duration':3000,
            'transition':'sine:out'});
        
        var markerX = parseInt(this.markers[id].x);
        var markerXEnd = (size.x / 2) + markerX;
        var markerXStart = markerXEnd + ((markerX > 0) ? 100 : -100);
        
        var markerY = parseInt(this.markers[id].y);
        var markerYEnd = (size.y / 2) + markerY - 200;
        var markerYStart = markerYEnd;
        
        marker.setStyle("opacity", 0);
        marker.setStyle("height", 74 - markerY);
        
        morph.start({
          'left': [markerXStart, markerXEnd],
          'top': [markerYStart, markerYEnd],
          'opacity': [0, 1]});
          
        i++;
      }  
    }
  }

});

var menu = new Menu();
var slider = new Slider();
var viewer = new Viewer();

window.addEvent('domready', function() {
  menu.attach();
  slider.attach();
});


window.addEvent("load", function(event) {
  viewer.attach();  
});