// JavaScript Document

Cufon.replace('#content h1, #content h2, #content-wrapper p, #page-biography #content p.name, #page-contact #content p.name, #description p.download a');
Cufon.replace('#menu a', { letterSpacing: 'normal' });

var Main = {
	
	init: function(){
		
		Main.ContentLoader.init();
		
		new Stripe('stripe', {
		  duration: 500,
		  onSelect: function(id){
				Main.ContentLoader.load(id);
			}
		});
		
	}
	
 };

var Status = new Class({

  status: {
	},
	
	is: function(key){
		return this.status[key];
	},
	
	isNot: function(key){
		return !this.is(key);
	},
	
	setStatus: function(key, value){
		this.status[key] = value;
	},
	
	getStatus: function(key){
		return this.status[key];
	}

});

var Stripe = new Class({

 
  Implements: [Events, Options, Status],
	
	Binds: ['scroll', 'stop'],
	
	options: {
		// onScrollUp: $empty();
		// onScrollDown: $empty();
		// onStop: $empty();
		// onSelect: $empty(id);
		itemSelector: 'div.stripe-item',
		wrapperSelector: '#stripe-content',
		buttonUp: 'a.up',
		buttonDown: 'a.down',
		duration: 1500,
		itemHeight: 144,
		offset: 288
	},
	
	initialize: function(container, options){
		
		this.container = document.id(container);
		
		this.setOptions(options);
		
		this.wrapper = this.container.getElement(this.options.wrapperSelector);
		
		this.items = this.container.getElements(this.options.itemSelector);
		if (this.items.length == 0) return null;
		this.count = this.items.length;
		this.selected = null;
		
		this.button = {
			up: this.container.getElement(this.options.buttonUp),
			down: this.container.getElement(this.options.buttonDown)
		}
		
		this.button.up.addEvents({
		  'mouseenter': function(){ if (this.isNot('scrolling')) this.fireEvent('scrollUp')}.bind(this),
			'mouseleave': this.fireEvent.bind(this, 'stop')
		});
		
		this.button.down.addEvents({
		  'mouseenter': function(){ if (this.isNot('scrolling')) this.fireEvent('scrollDown')}.bind(this),
			'mouseleave': this.fireEvent.bind(this, 'stop')
		});
		
		this.wrapper.addEvent('click:relay({itemSelector})'.substitute({itemSelector: this.options.itemSelector}), function(event){
			var item = document.id(event.target).getParent(this.options.itemSelector);
			var id = item.get('clip:id');
			if (this.selected != item){
				if (this.selected){
					this.selected.removeClass('active');
					this.selected.getElement('span.mask').fade('out');
				}
				this.selected = item.addClass('active');
				this.selected.getElement('span.mask').fade('hide').fade('in');
				this.fireEvent('select', id);
			}
		}.bind(this));
		
		this.scrollFx = new Fx.Tween(this.wrapper, { property: 'top', duration: this.options.duration, transition: 'linear' });
		this.scrollFx.set(0);
		this.offset = 0;
		this.topItem = 0;
		this.bottomItem = this.count - 1;
		
		// self events
		this.addEvents({
		  'scrollUp': this.scroll.pass('up'),
			'scrollDown': this.scroll.pass('down'),
			'stop': this.stop
		});
		
		// default status
		this.setStatus('scrolling', false);
				
		this.reset('up');
		
	},
	
	scroll: function(dir){
		this.setStatus('scrolling', true);
		switch (dir){
			case 'up':
			  this.scrollFx.start(this.offset + this.options.itemHeight).chain(
				  function(){
  					this.offset += this.options.itemHeight;
						if (this.offset > -this.options.offset) this.reset('up');
						this.fireEvent('scrollUp');
					}.bind(this)
				);
			break;
			case 'down':
			  this.scrollFx.start(this.offset - this.options.itemHeight).chain(
				  function(){
						this.offset -= this.options.itemHeight;
						if (this.offset < this.options.offset) this.reset('down');
						this.fireEvent('scrollDown');
					}.bind(this)
				);
			break;
			
		}
	},
	
	stop: function(){
		this.scrollFx.cancel();
		this.setStatus('scrolling', false);
		this.offset = this.wrapper.getStyle('top').toInt();
		this.offset > -this.options.offset ? this.reset('up') : this.reset('down');
	},
	
	reset: function(dir){
		switch (dir){
			case 'down':
			  this.items[this.topItem].inject(this.wrapper, 'bottom');
				this.topItem = (this.topItem+1)%this.count;
				this.offset += this.options.itemHeight;
			break;
			case 'up':
			  this.items[this.bottomItem].inject(this.wrapper, 'top');
				this.topItem = this.bottomItem;
				this.offset -= this.options.itemHeight;
			break;
		}
		this.bottomItem = (this.topItem + this.count - 1)%this.count;
		this.scrollFx.set(this.offset);
	}


});

Main.ContentLoader = {
	
	init: function(){
		this.container = document.id('content');
		this.player = document.id('player');
		
		this.request = new Request.HTML({
		  url: '/ajax.php',
			update: this.container,
			onComplete: function(){
				this.build();
			}.bind(this)
		});
		
		// on init load
		if (this.player) this.build(this.player.get('clip:id').toInt() == 999);
		
	},
	
	load: function(id){
		this.request.cancel();
		this.request.get({'clipID': id});
	},
	
	build: function(autoplay){
		Cufon.replace('h1, #description p.download');
		var player = document.id('player');
		var width = player.get('clip:width').toInt();
		var height = player.get('clip:height').toInt();
		var name = player.get('clip:name');
		var image = name.replace(/([^\.]*)\.(.*)/, '$1');
		flashvars.videoPath = '/videos/{name}'.substitute({name: name});
		flashvars.imagePath = '/videos/{image}.jpg'.substitute({image: image});
		if (autoplay) flashvars.videoAutoPlay = 'true';
		new Swiff('/flash/player.swf', {
			container: 'player',
			width: width,
			height: height+30,
			params: {
				flashvars: $H(flashvars).toQueryString(),
			  scale: 'noscale',
			  allowfullscreen: 'true',
			  salign: "tl",
			  bgcolor: "000000"
			}
		});
	}
 };

window.addEvent('domready', Main.init);