// Aktiva projekt-bläddring
// 2008-04-28 - 2008-04-29

var ProjectBrowser = {
	init: function(){
		this.widthIncrement = 216;
		this.indexStart = 3;
		this.indexMax = 0;
		var holder = $('browser');
		var items = $ES('div.item', holder)
		
		items.each(function(item){
			this.indexMax++;
			//alert(this.indexMax);
			var projectItem = new ProjectItem(item);
		}.bind(this));
		
		
		var wrapper = new Element('div', { 'id': 'browser_wrap' } );		
		var content = new Element('div', { 'id': 'browser_content' } );
		
		wrapper.injectInside(holder);
		content.injectInside(wrapper);
		items.injectInside(content);
		holder.addClass('init');
		
		this.content = content;
		this.index = this.indexStart;		
		this.fx = new Fx.Style(this.content, 'margin-left', { duration: 500 } );			
		
		this.controlForward = new BrowseControl("forward");
		this.controlBack = new BrowseControl("back");
		this.controlForward.injectInside(holder);
		this.controlBack.injectTop(holder);
		this.checkControls();
	},
	
	scrollForward: function(){
		if(this.index != this.indexMax){
			var margin = this.content.getStyle('margin-left').toInt();
			this.fx.start(margin, margin-this.widthIncrement);
			this.index++;
		}
		
		this.checkControls();
	},
	
	scrollBack: function(){
		if(this.index != this.indexStart){
			var margin = this.content.getStyle('margin-left').toInt();
			this.fx.start(margin, margin+this.widthIncrement);
			this.index--;
		}
		
		this.checkControls();
	},
	
	checkControls: function(){
		if(this.index > this.indexStart){
			if(!this.controlBack.control.active){
				this.controlBack.activate();
				this.controlBack.addEvent('click', this.scrollBack.bind(this));	
			}
		}else{
			this.controlBack.deactivate();
			this.controlBack.removeEvents('click');
		}

		if(this.index < this.indexMax){
			if(!this.controlForward.control.active){
				this.controlForward.activate();
				this.controlForward.addEvent('click', this.scrollForward.bind(this));
			}
		}else{
			this.controlForward.deactivate();
			this.controlForward.removeEvents('click');
		}
	}
};

var ProjectItem = new Class({
	initialize: function(el){
		this.links = $ES('a', $(el));
		el.addEvent('mouseenter', this.onMouseOver);
		el.addEvent('mouseleave', this.onMouseOut);
		el.addEvent('click', this.onClick.bind(this));
	},
	
	onMouseOver: function(e){
		this.addClass('over');
	},
	
	onMouseOut: function(e){
		this.removeClass('over');
	},
	
	onClick: function(e){
		window.location = this.links[0];
	}
});

var BrowseControl = new Class({
	initialize: function(id){
		this.control = new Element(
			'div', {
				'id': id,
				'class': 'control',
				'events': {
					'mouseenter': this.onMouseOver,
					'mouseleave': this.onMouseOut
				}
			}
		);		
	},
	
	activate: function(){
		this.control.active = true;
		this.control.addClass('active');
	},
	
	deactivate: function(){
		this.control.active = false;
		this.control.removeClass('active');
		this.control.removeClass('over');
	},
	
	addEvent: function(e, func){
		this.control.addEvent(e, func);
	},
	
	removeEvents: function(e){
		this.control.removeEvents(e);
	},
	
	onMouseOver: function(e){
		if(this.active)
			this.addClass('over');
	},
	
	onMouseOut: function(e){
		this.removeClass('over');
	},

	injectTop: function(el){
		$(this.control).injectTop(el);
	},
	
	injectInside: function(el){
		$(this.control).injectInside(el);
	}
});