/*
 * NavigationMenu
 */
var NavigationMenu = {
	start: function() {
	  $('menu').down('.links').observe('click', function(event) {
		 var element = event.findElement('a.link');
		 
		 if (element) {
		   event.stop();
		   // workmenu afhandelen
			 if (element.hasClassName('work')) {
				 WorkMenu.setFirst();
			 }
			 else if ($('work').down('.active')) {
				 WorkMenu.reset(true);
			 }
		   NavigationMenu.set(element);
		 }	  
	  });
	  
	  /*$('logo').observe('click', function(event) {
	    event.stop();
	    this.removeActive();
	    WorkMenu.removeActive();
	    Boxes.scrollToMenuItem($('logo').getAttribute('rel'));
	    NavigationMenu.setActive('work');
	    WorkMenu.setActive($('logo').getAttribute('rel').substr(7));
	  }.bind(this));
	  */
	  
	  $('leftright').observe('click', function(event) {
		  var element = event.findElement('.arrow');
		  
		  if (element) {
		    event.stop();
		    this.removeActive();
		    WorkMenu.removeActive();
		    Boxes['scroll' + element.getAttribute('rel').capitalize()]();
		  }
	  }.bind(this));
	},

	removeActive: function() {
		var active = $('menu').down('div.links a.active');
		if (active) active.removeClassName("active");	
	},
	
	setActive: function(element) {
	  this.removeActive();
	  
	  var target;
	  if (Object.isElement(element)) {
		target = element;	  
	  }
	  else {
		// target is a class inside menu
		target = $('menu').down('a.' + element);
	  }
	  target.addClassName('active');
	  
	  return target;
	},
	
	set: function(element) {
	  var target = this.setActive(element);
	  Boxes.scrollToMenuItem(target.getAttribute('rel'));
	}
};
document.observe('dom:loaded', function() {NavigationMenu.start();});



/*
 * WorkMenu
 */

var WorkMenu = {
  build: function() { this.CufonReplace(); },

  CufonReplace: function() {
	Cufon.set('fontFamily', 'Roparosa');
	
	Cufon.replace('#work .active', { hover: { color: '#232124' }})
	     .replace('#work .link', { hover: { color: '#232124' }})
	     .replace('#work .span');
  },

  removeActive: function() {
	if ($('work').down('.active')) this.reset(true);  
  },

  reset: function(rebuild) {
	$('work').select('div.link').invoke("removeClassName", 'active');
	if (rebuild) this.build();
  },

  rollback: function() {
	 
  },
  
  setFirst: function() {
	var first = $('work').down('a');
	if (first) this.set(first.getAttribute('rel'));
  },
  
  getActiveId: function() {
	var active = $('work').down('.active a');
	return active ? active.getAttribute('rel') : null;
  },
  
  setActive: function(id) {
	if (this.getActiveId() == id) return;
	
    this.reset();
    $('work').down('a[rel='+ id +']').up().addClassName('active');
    this.build();

    // zorg dat WORK geselecteerd is
    NavigationMenu.setActive('work'); 
  
  },
  
  set: function(id) {
    this.setActive(id);
    
    // scroll naar het menu
    Boxes.scrollToMenuItem('project' + id);
  }
};

//active sIFR (at dom:loaded through sifr.js, use prototype's just in case)
document.observe('dom:loaded', WorkMenu.build.bind(WorkMenu));




/*
 * Boxes
 */

var Boxes = {
  options: {},
  
  start: function() {
	Object.extend(this.options, {
      duration: {
		appear: Prototype.Browser.IE ? 0.01 : 0.24,
	    fade:   Prototype.Browser.IE ? 0.01 : 0.2,
	    scroll: 0.75
	  },
	  transition: function(pos) {
		  return ((pos/=0.5) < 1 ? 0.5 * Math.pow(pos, 4) :
          -0.5 * ((pos-=2) * Math.pow(pos,3) - 2));
      }
	});
	
	this.scrollPx = this.options.width + this.options.spacing;
	this.options.credits = Math.max(this.options.credits, (document.viewport.getWidth() - this.scrollPx - this.options.side - this.options.spacing));
	
	this.setWidths();
	this.CufonReplace();
    this.startObserving();
    
    $('boxes').setStyle({ visibility: 'visible' });
  },
  
  getPageWidth: function() {
	  var width = this.scrollPx * this.boxcount + this.options.side * 2 + this.options.credits - 28;
	  return width;
  },
  
  setWidths: function() {
	  var pageWidth = this.getPageWidth();
  
	  $('credits').setStyle({ width: this.options.credits - 28 + 'px' });
	  $('page').setStyle({ width: pageWidth + 'px' });
	  $('work').setStyle({ width: (pageWidth - this.options.side * 2 - this.scrollPx) + 'px'}); // - scrollPx for safety
  },
  
  startObserving: function() {
	/*
	 * Fade/Appear
	 */
	$$('.box, .photobox .photo, .photobox .description').invoke('observe', 'mouseover', function(event) {
		var element = event.findElement();
		var box = event.findElement('.photobox, .box');
		// shows arrow and description
		
		
		if (element) {
			this.showContext(box);
		}
	}.bind(this));
	$$('.box, .photobox .photo, .photobox .description').invoke('observe', 'mouseleave', function(event) {
		var element = event.findElement();
		var box = event.findElement('.photobox, .box');
		
		// hide arrow and description
		if (element) {
			this.hideContext(box);
		}
	}.bind(this));
  
	/*
	 * Slide right/left
	 */
	$('boxes').observe('click', function(event) {
	  var element = event.findElement(".arrow");
	  if (!element) return;
	  var box = element.up('.photobox, .box');
	  var scroll = document.viewport.getScrollOffsets();
	  var vpWidth = document.viewport.getWidth();
	  
	  if (element.hasClassName('arrowLeft')) {
		  // if there is a box to the left of this one
		  var previous = box.previous();
		  if (previous && scroll[0] > 30) {
		    // hide the navigation of this box
			this.hideContext(box);
			this.showContext(previous);
			this.scrollLeft();
			
			// check what previous is
			// project
			var id = previous.getAttribute('id');
			var project = id && id.indexOf('project') > -1 ? id.substr(9) : null;
			if (project) {
				NavigationMenu.setActive('work');
				WorkMenu.setActive(id.substr(16));
			}
			// anders zou het een menuItem kunnen zijn, die hebben ook een 'menuItem' prefix op de id
			else if (id.startsWith('menuItem')) {
				NavigationMenu.setActive(id.substr(9));
				WorkMenu.removeActive();
			}
			// anders moet het een photobox zijn
			else if (previous.hasClassName("photobox")) {
			  // vind bijbehorend project
				var projectbox = previous.previous('.photobox[id^=menuItem_project]');
			    if (projectbox) {
			    	NavigationMenu.setActive('work');
			    	WorkMenu.setActive(projectbox.getAttribute('id').substr(16));
			    }
			}
		  }
	  }
	  else {
		  var next = box.next();
		  if (next) { // TODO: scroll size check   && (scroll[0] + vpWidth < this.getPageWidth() - 30)
		    // hide the navigation of this box
			this.hideContext(box);
			this.showContext(next);
			this.scrollRight();
			
			// check what the next is
			// project
			var id = next.getAttribute('id');
			var project = id && id.indexOf('project') > -1 ? id.substr(9) : null;
			if (project) {
				NavigationMenu.setActive('work');
				WorkMenu.setActive(id.substr(16));
			}
			// anders zou het een menuItem kunnen zijn, die hebben ook een 'menuItem' prefix op de id
			else if (id.startsWith('menuItem')) {
				NavigationMenu.setActive(id.substr(9));
				WorkMenu.removeActive();
			}
			// anders moet het een photobox zijn
			else if (next.hasClassName("photobox")) {
			  // vind bijbehorend project
				var projectbox = next.previous('.photobox[id^=menuItem_project]');
			    if (projectbox) {
			    	NavigationMenu.setActive('work');
			    	WorkMenu.setActive(projectbox.getAttribute('id').substr(16));
			    }
			}
		  }
	  }
	  
	  //NavigationMenu.removeActive();
	 // WorkMenu.removeActive();
	}.bind(this));	
	
  },
  
  showContext: function(box) {
	var fx;
	if ((fx = box.retrieve('_photoboxEffect'))) {
		  // cancel whatever effect is running
		fx.cancel();
	}
	
	var parFx = [];
	if (box.down('.arrowLeft')) {
		parFx.push(new Effect.Appear(box.down('.arrowLeft'), { sync: true }));
	}
	if (box.down('.arrowRight')) {
		parFx.push(new Effect.Appear(box.down('.arrowRight'), { sync: true }));
	}
	if (box.hasClassName('photobox') && box.down('.description')) {
		parFx.push(new Effect.Appear(box.down('.description'), { sync: true }));
	}
	if (parFx.length > 0) {
		box.store('_photoboxEffect', new Effect.Parallel(parFx, {
			duration: this.options.duration.fade
		}));
	}
  },
  
  hideContext: function(box) {
	var fx;
	if ((fx = box.retrieve('_photoboxEffect'))) {
		  // cancel whatever effect is running
		fx.cancel();
	}
	
	var parFx = [];
	if (box.down('.arrowLeft')) {
		parFx.push(new Effect.Fade(box.down('.arrowLeft'), { sync: true }));
	}
	if (box.down('.arrowRight')) {
		parFx.push(new Effect.Fade(box.down('.arrowRight'), { sync: true }));
	}
	if (box.hasClassName('photobox') && box.down('.description')) {
		parFx.push(new Effect.Fade(box.down('.description'), { sync: true }));
	}
	
	if (parFx.length > 0) {
		box.store('_photoboxEffect', new Effect.Parallel(parFx, {
			duration: this.options.duration.fade
		}));
	}
  },
  
  scrollLeft: function() {
    this.scrollBy(-1 * this.scrollPx);
  },
  scrollRight: function() {
	this.scrollBy(this.scrollPx);
  },
  
  getMenuItemPosition: function(item) {
	var item = $('menuItem_' + item);
		
	// tel welke box het is
	var index;
	$('boxes').childElements().each(function(box, i) {
		if (box == item) index = i;
	});
	return index;
  },
  
  scrollToMenuItem: function(item) {
	this.scrollToPosition(this.getMenuItemPosition(item));	
  },
  
  scrollToPosition: function(position) {
	// get the scroll amount for that position
	var x = position * this.scrollPx;
	var currentX = document.viewport.getScrollOffsets()[0];
	this.scrollBy(x - currentX);
  },
  
  scrollBy: function(x, instant) {
	// cancel running effects
	if (this.scrollFx) {
		this.scrollFx.cancel();
		this.scrollFx = null;
	}
	
	//	window.scrollBy(x, y);
	var scroll = document.viewport.getScrollOffsets();
    var currentX = scroll[0];
	var currentY = scroll[1];
    
	if (instant) {
		window.scrollTo((currentX + x).toFixed(0), currentY);
	} else {
	    this.scrollFx =  new Effect.Tween(this.lightview, 0, 1, {
	    	duration: arguments[1] || this.options.duration.scroll,
	    	transition: this.options.transition
	  	}, function(t) {
	  	  window.scrollTo((currentX + (x * t)).toFixed(0), currentY);
	  	});
	}
  },
  
  CufonReplace: function() {
	Cufon.set('fontFamily', 'AvantGardeDemiCond')
	     .replace('.title', { color: '#000'} );
	return;
  }
};
document.observe('dom:loaded', function() { Boxes.start(); });

(function() {
  function wheel(event) {
    var realDelta;

    // normalize the delta
    if (event.wheelDelta) // IE & Opera
      realDelta = event.wheelDelta / 120;
    else if (event.detail) // W3C
      realDelta = -event.detail / 3;

    if (!realDelta) return;

    if (event.target) {
	    var customEvent = event.target.fire("mouse:wheel", {
	     delta: realDelta });
	    if (customEvent.stopped && event.stop) event.stop();
    }
  }

 document.observe("mousewheel",     wheel);
 document.observe("DOMMouseScroll", wheel);
})();

document.observe('mouse:wheel', function(event) {
  event.stop();
  Boxes.scrollBy((-1 * event.memo.delta) * Boxes.scrollPx, true);
});