window.addEvent('domready', function(){
	ht = new HistoricalTimeline();
	
	initTopMenu();
});

function initTopMenu(){
	var menuitem = $$('#menu li');

	menuitem.addEvent('mouseenter', function(){
		this.addClass('hover');
		this.getChildren().addClass('hover');
	});

	menuitem.addEvent('mouseleave', function(){
		this.removeClass('hover');
		this.getChildren().removeClass('hover');
	});

	if($('toggle-target')){
		$$('.toggler').addEvent('mouseenter',function(){
			$('toggle-target').setHTML('<img src=images/toggler-' + this.getProperty('id').substr('7') + '.jpg>');		
		});
	}
	
	// Now check for current page and add hover event for the main menu top most item
	var topMostMenuItems = $('menu').getChildren();
	
	for(var i = 0; i < topMostMenuItems.length; i++){
		if(topMostMenuItems[i].getElement('a').get('text') == topMostPage){
			topMostMenuItems[i].addClass('current');
		}
		
		topMostMenuItems[i].addEvent('mouseover', function(){
			this.addClass('current');
		});
		
		topMostMenuItems[i].addEvent('mouseout', function(){
			if(this.getElement('a').get('text') != topMostPage){
				this.removeClass('current');
			}
		});
	}
}




/**
 ********************************************************
 * HISTORICAL TIMELINE
 ********************************************************
 */
var HistoricalTimeline = new Class({
	Implements: [Events, Options],
	
	/**
	 ********************************************************
	 * OPTIONS & VARS
	 ********************************************************
	 */
	options: {
		startDecade: 1870,
		endDecade: 2020,
		interval: 10,
		maxNumSwitcher: 11,
		imageFolderPath: '/wp-content/uploads/'
	},
	
	// Ref
	historicalTimeline: null,
	template: null,
	tooltip: null,
	decade: null,
	leftNav: null,
	rightNav: null,
	eventContainer: null,
	helpPanel: null,
	searchPanel: null,
	searchForm: null,
	searchResult: null,
	eventSwitcherWrap: null,
	eventSwitcher: null,
	help: null,
	search: null,
	
	// class
	contentScroller: null,
	timelineSlider: null,
	searchRequest: null,
	decadeRequest: null,
	eventRequest: null,
	mask: null,
	
	// Data
	requestURL: '/wp-content/plugins/historical-timeline/ajax.php',
	decadeEvents: null,
	currentDecade: null,
	currentEventIndex: -1,
	eventSwitcherWidth: 0,
	
	
	
	/**
	 ********************************************************
	 * CONSTRUCTOR
	 ********************************************************
	 */
	initialize: function(argOpt){
		this.setOptions(argOpt);
		this.historicalTimeline	= $('historicalTimeline');
		this.template			= $('template');
		this.tooltip			= $('tooltip');
		this.decade				= $('decade');
		this.leftNav			= $('leftNav');
		this.rightNav			= $('rightNav');
		this.eventContainer		= $('eventContainer');
		this.helpPanel			= $('helpPanel');
		this.searchPanel		= $('searchPanel');
		this.searchResult		= $('searchResult');
		this.searchForm			= $('searchForm');
		this.eventSwitcher		= $('eventSwitcher');
		this.help				= $('help');
		this.search				= $('search');
		this.eventSwitcherWrap	= new Element('div', {
			'class': 'eventSwitcherWrap'
		}).wraps(this.eventSwitcher);
		this.contentScroller	= new ContentScroller($('description'), $('scrollbar'), $('scrollKnob'));
		this.timelineSlider 	= new TimelineSlider($('timelineSlider'));
		this.mask				= new Mask(document.body);
		
		$$('.mask').each(function(argItm){
			argItm.setStyle('opacity', 0.6);
		});
		
		this.tooltip.setStyle('opacity', 0);
		this.searchPanel.setStyle('display', 'none');
		
		this.leftNav.addEvent('click', function(e){
			this.prevEvent();
		}.bind(this));
		
		this.rightNav.addEvent('click', function(e){
			this.nextEvent();
		}.bind(this));
		
		this.help.addEvent('click', function(e){
			this.mask.show();
			this.helpPanel.setStyle('display', 'block');
			
			var _docSize		= document.body.getSize();
			var _helpPanelSize	= this.helpPanel.getSize();
			
			this.helpPanel.setStyles({
				'left': _docSize.x / 2 - _helpPanelSize.x /2,
				'position': 'absolute',
				'top': 100
			});
			
			this.helpPanel.tween('opacity', 1);
		}.bind(this));
		
		this.helpPanel.getElement('.close a').addEvent('click', function(e){
			e.stop();
			this.helpPanel.setStyle('display', 'none');
			this.mask.hide();
		}.bind(this));
		
		this.helpPanel.getElement('.close a').addEvent('click', function(e){
			e.stop();
			this.helpPanel.setStyle('display', 'none');
			this.mask.hide();
		}.bind(this));
		
		this.search.addEvent('click', function(e){
			this.mask.show();
			this.searchPanel.setStyle('display', 'block');
			
			var _docSize			= document.body.getSize();
			var _searchPanelSize	= this.searchPanel.getSize();
			
			this.searchPanel.setStyles({
				'left': _docSize.x / 2 - _searchPanelSize.x /2,
				'position': 'absolute',
				'top': 100
			});
			
			this.searchPanel.tween('opacity', 1);
		}.bind(this));
		
		this.searchPanel.getElement('.close a').addEvent('click', function(e){
			e.stop();
			this.searchPanel.setStyle('display', 'none');
			this.mask.hide();
		}.bind(this));
		
		
		
		this.setupTimeline();
		this.setupSearchForm();
		this.requestDecade(this.options.startDecade, 'first');
		this.timelineSlider.posTimeline(0);
	},
	
	
	/**
	 ********************************************************
	 * Functions
	 ********************************************************
	 */
	setupTimeline: function(){
		this.timelineSlider.addEvent('autoSelected', function(argDecade){
			this.requestDecade(argDecade, 'first');
		}.bind(this));
		
		var _tempDecade = this.options.startDecade;
		
		while(_tempDecade <= this.options.endDecade){
			var _timelineEl = this.timelineSlider.addItem(_tempDecade);
			
			if(_tempDecade == this.options.endDecade){
				_timelineEl.addClass('last');
				_timelineEl.addEvent('selected', function(e){
					this.requestDecade(e.target.getPrevious(this.options.itemTag).retrieve('decade'), 'first');
				}.bind(this));
				
			}else{
				_timelineEl.addEvent('selected', function(e){
					this.requestDecade(e.target.retrieve('decade'), 'first');
				}.bind(this));
			}
			
			_tempDecade += this.options.interval;
		}
	},
	
	setupSearchForm: function(){
		this.searchForm.addEvent('submit', function(e){
			e.stop();
		}.bind(this));
		
		this.searchForm.getElements('select').addEvent('change', function(e){
			this.requestSearch();
		}.bind(this));
		
		this.searchForm.getElements('input').addEvent('keyup', function(e){
			if(e.key != 'up' && e.key != 'left' && e.key != 'down' && e.key != 'right'){
				this.requestSearch();
			}
		}.bind(this));
	},
	
	setupEventSwitcher: function(argSelect){
		this.eventSwitcher.empty();
		this.eventSwitcher.setStyle('left', '0px');
		
		var _selectedIndex;
		
		// Create switcher element
		if(this.decadeEvents.length){
			for(var i = 0; i < this.decadeEvents.length; i++){
				var eventEl = new Element('li', {
					'styles': {
						'opacity': 0
					}
				});
				eventEl.store('eventIndex', i);
				eventEl.store('eventId', this.decadeEvents[i].EventID);
				eventEl.store('eventTitle', this.decadeEvents[i].EventTitle);
				eventEl.store('eventDate', this.decadeEvents[i].EventDate);
			
				if(i == 0)									eventEl.addClass('firstSwitcher');
				if(i == this.decadeEvents.length - 1)		eventEl.addClass('lastSwitcher');
			
				eventEl.inject(this.eventSwitcher);
				eventEl.setStyle('opacity', 1);
			
				if(i == 0){
					this.eventSwitcherWidth =
						eventEl.getSize().x +
						eventEl.getStyle('margin-left').toInt() +
						eventEl.getStyle('margin-right').toInt();
				}
			}
		
			var _eventSwitchers = this.eventSwitcher.getElements('li');
			
			if(argSelect == 'first'){
				_selectedIndex = 0;
				
				if(_eventSwitchers[this.options.maxNumSwitcher - 1]) _eventSwitchers[this.options.maxNumSwitcher - 1].addClass('next');
				
			}else if(argSelect == 'last'){
				_selectedIndex			= _eventSwitchers.length - 1;
				
				var _firstInSetIndex	= Math.floor(_eventSwitchers.length / (this.options.maxNumSwitcher - 1)) * (this.options.maxNumSwitcher - 1);
				var _leftCoor			= this.eventSwitcher.getCoordinates(this.eventSwitcherWrap).left - this.eventSwitcherWidth * _firstInSetIndex;
				
				this.eventSwitcher.tween('left', _leftCoor);
				if(_firstInSetIndex != 0) _eventSwitchers[_firstInSetIndex].addClass('prev');
			
			}else{
				// Look for this item
				for(var i = 0; i < _eventSwitchers.length; i++){
					if(_eventSwitchers[i].retrieve('eventId') == argSelect){
						_selectedIndex = i;
						
						var _set = Math.floor(i / (this.options.maxNumSwitcher));
						
						if(_set == 0){
							if(_eventSwitchers[this.options.maxNumSwitcher - 1]) _eventSwitchers[this.options.maxNumSwitcher - 1].addClass('next');
						}else{
							var _firstInSet	= _set * this.options.maxNumSwitcher;
							var _lastInSet	= _firstInSet + this.options.maxNumSwitcher - 1;
							var _leftCoor	= this.eventSwitcher.getCoordinates(this.eventSwitcherWrap).left - this.eventSwitcherWidth * _firstInSet;
							
							this.eventSwitcher.tween('left', _leftCoor);
							if(_firstInSet != 0)			_eventSwitchers[_firstInSet].addClass('prev');
							if(_eventSwitchers[_lastInSet])	_eventSwitchers[_lastInSet].addClass('next');
						}
					}
				}
			}
		
			// Add event to switcher element
			_eventSwitchers.each(function(argSwitcher){
				// Event - mouseenter
				argSwitcher.addEvent('mouseenter', function(){
					//var datePart = argSwitcher.retrieve('eventDate').split('-');
					
					/*this.tooltip.getElementById('tooltipContent').set('html',
						'<strong>' +datePart[2]+ '-' +datePart[1]+ '-' +datePart[0]+ '</strong><br />' + argSwitcher.retrieve('eventTitle')
					);*/
					this.tooltip.getElementById('tooltipContent').set('html',
						'<strong>' +argSwitcher.retrieve('eventTitle')+ '</strong>'
					);
				
					var switcherCoords	= argSwitcher.getCoordinates(this.historicalTimeline);
					var switcherSize	= argSwitcher.getSize();
					var tooltipCoords	= this.tooltip.getCoordinates(this.historicalTimeline);
					var tooltipSize		= this.tooltip.getSize();
				
					this.tooltip.setStyles({
						// 7 is just an offset, changes as you wish
						'top': 		(switcherCoords.top - tooltipSize.y + 7)+ 'px',
						'left': 	(switcherCoords.left + switcherSize.x / 2 - tooltipSize.x / 2)+ 'px'
					});
					(Browser.Engine.trident) ? this.tooltip.setStyle('opacity', 1) : this.tooltip.tween('opacity', 1);
				}.bind(this));
			
				// Event - mouseleave
				argSwitcher.addEvent('mouseleave', function(){
					(Browser.Engine.trident) ? this.tooltip.setStyle('opacity', 0) : this.tooltip.tween('opacity', 0);
				}.bind(this));
			
				// Event - click
				argSwitcher.addEvent('click', function(){
					this.selectSwitcher(argSwitcher.retrieve('eventIndex'));
					this.requestEvent(argSwitcher.retrieve('eventId'));
					this.checkSwitcherClass(argSwitcher);
				}.bind(this));
			}.bind(this));
		
			// Set dimension
			this.eventSwitcher.setStyle('width', this.eventSwitcherWidth * this.decadeEvents.length + 'px');
		
			if(this.decadeEvents.length <= this.options.maxNumSwitcher){
				this.eventSwitcherWrap.setStyle('width', this.eventSwitcherWidth * this.decadeEvents.length + 'px');
			}else{
				this.eventSwitcherWrap.setStyle('width', this.eventSwitcherWidth * this.options.maxNumSwitcher + 'px');
			}
		}
		
		return _selectedIndex;
	},
	
	selectSwitcher: function(argIndex){
		this.currentEventIndex = argIndex;
		
		var switchers = this.eventSwitcher.getElements('li');
		
		for(var i = 0; i < switchers.length; i++){
			switchers[i].removeClass('selected');
			
			if(this.currentEventIndex == i){
				switchers[i].addClass('selected');
			}
		}
	},
	
	checkSwitcherClass: function(argSwitcher){
		if(argSwitcher.hasClass('prev')){
			this.setSwitcherScrollClass(argSwitcher, true);
			
			var _leftCoor = this.eventSwitcher.getCoordinates(this.eventSwitcherWrap).left + this.eventSwitcherWidth * (this.options.maxNumSwitcher - 1);
			
			this.eventSwitcher.tween('left', _leftCoor);
			
			return true;
			
		}else if(argSwitcher.hasClass('next')){
			this.setSwitcherScrollClass(argSwitcher, false);
			
			var _leftCoor = this.eventSwitcher.getCoordinates(this.eventSwitcherWrap).left - this.eventSwitcherWidth * (this.options.maxNumSwitcher - 1);
			
			this.eventSwitcher.tween('left', _leftCoor);
			
			return true;
		}
		
		return false;
	},
	
	checkSwitcherPrevClass: function(argSwitcher){
		if(argSwitcher.hasClass('prev')){
			this.setSwitcherScrollClass(argSwitcher, true);
			
			var _leftCoor = this.eventSwitcher.getCoordinates(this.eventSwitcherWrap).left + this.eventSwitcherWidth * (this.options.maxNumSwitcher - 1);
			
			this.eventSwitcher.tween('left', _leftCoor);
			
			return true;
			
		}
		
		return false;
	},
	
	checkSwitcherNextClass: function(argSwitcher){
		if(argSwitcher.hasClass('next')){
			this.setSwitcherScrollClass(argSwitcher, false);
			
			var _leftCoor = this.eventSwitcher.getCoordinates(this.eventSwitcherWrap).left - this.eventSwitcherWidth * (this.options.maxNumSwitcher - 1);
			
			this.eventSwitcher.tween('left', _leftCoor);
			
			return true;
		}
		
		return false;
	},
	
	setSwitcherScrollClass: function(argSwitcher, argIsPrev){
		if(argSwitcher){
			this.eventSwitcher.getElements('li.prev').each(function(argItm){
				argItm.removeClass('prev');
			});
			this.eventSwitcher.getElements('li.next').each(function(argItm){
				argItm.removeClass('next');
			});
			
			if(argIsPrev == true){
				// Current switcher has prev class assign to it previously
				argSwitcher.addClass('next');
				
				var _prevSwitchers = argSwitcher.getAllPrevious('li');
				
				if(_prevSwitchers[this.options.maxNumSwitcher - 2]){
					var _prevSwitcher = _prevSwitchers[this.options.maxNumSwitcher - 2];
					
					if(_prevSwitcher.retrieve('eventIndex') != 0) _prevSwitcher.addClass('prev');
				}
				
			}else{
				// Current switcher has next class assign to it previously
				argSwitcher.addClass('prev');
				
				var _nextSwitchers = argSwitcher.getAllNext('li');
				
				if(_nextSwitchers[this.options.maxNumSwitcher - 2]) _nextSwitchers[this.options.maxNumSwitcher - 2].addClass('next');
			}
		}
	},
	
	prevEvent: function(){
		var _switchers = this.eventSwitcher.getElements('li');
		
		if(this.currentEventIndex - 1 < 0){
			// Go to previous decade
			var _prevDecade = this.currentDecade - this.options.interval;
			
			if(_prevDecade >= this.options.startDecade){
				// OK
				this.requestDecade(_prevDecade, 'last');
				this.timelineSlider.posTimelineByDecade(_prevDecade);
			}else{
				// This is the first decade, notify
			}
		}else{
			var _currentSwitcher	= _switchers[this.currentEventIndex];
			var _prevSwitcher		= _switchers[this.currentEventIndex - 1];
			
			this.selectSwitcher(_prevSwitcher.retrieve('eventIndex'));
			this.requestEvent(_prevSwitcher.retrieve('eventId'));
			
			if(this.checkSwitcherPrevClass(_prevSwitcher) == false){
				this.checkSwitcherPrevClass(_currentSwitcher);
			}
		}
	},
	
	nextEvent: function(){
		var _switchers = this.eventSwitcher.getElements('li');
		
		if(this.currentEventIndex + 1 >= _switchers.length){
			// Go to next decade
			var _nextDecade = this.currentDecade + this.options.interval;
			
			if(_nextDecade <= this.options.endDecade){
				// OK
				this.requestDecade(_nextDecade, 'first');
				this.timelineSlider.posTimelineByDecade(_nextDecade);
			}else{
				// This is the last decade, notify
			}
		}else{
			var _currentSwitcher	= _switchers[this.currentEventIndex];
			var _nextSwitcher		= _switchers[this.currentEventIndex + 1];
			
			this.selectSwitcher(_nextSwitcher.retrieve('eventIndex'));
			this.requestEvent(_nextSwitcher.retrieve('eventId'));
			
			if(this.checkSwitcherNextClass(_nextSwitcher) == false){
				this.checkSwitcherNextClass(_currentSwitcher);
			}
		}
	},
	
	
	/**
	 ********************************************************
	 * REQUEST & RENDER FUNCTIONS
	 ********************************************************
	 */
	requestSearch: function(){
		if(this.searchRequest != null){
			this.searchRequest.cancel();
		}
		
		this.searchRequest = new Request.JSON({
			'url': 			this.requestURL,
			'method': 		'post',
			'data': 		this.searchForm.toQueryString(),
			'onSuccess': 	function(argJSON, argText){
				// Destroy list item
				this.searchResult.empty();
				if(argJSON){
					if(argJSON.length){
						argJSON.each(function(argItm){
							var _searchItm = this.template.getElement('li.searchItem').clone();
						
							_searchItm.store('eventId', argItm.EventID);
							_searchItm.getElement('.thumbWrap img').setProperties({
								'src': this.options.imageFolderPath + argItm.EventThumbImageFile,
								'alt': argItm.EventImageCaption
							});
						
							var _niceDate;
							if(argItm.EventDateOverride) {
								_niceDate = argItm.EventDateOverride;
							}
							else {
								var _datePart	= argItm.EventDate.split('-');
								_niceDate = _datePart[2] + '-' + _datePart[1] + '-' + _datePart[0];
							}
						
							_searchItm.getElement('.itemDesc h3').set('html', argItm.EventTitle);
							_searchItm.getElement('.itemDesc p').set('html', '<strong>' + _niceDate + '</strong>');
						
							_searchItm.addEvent('click', function(e){
								var _datePart	= argItm.EventDate.split('-');
								var _dateYear	= _datePart[0].slice(0, 3) + '0';
							
								this.requestDecade(_dateYear, argItm.EventID);
							
								this.searchPanel.setStyle('display', 'none');
								this.mask.hide();
							
							}.bind(this));
						
							_searchItm.inject(this.searchResult);
						}.bind(this));
					
					}
				}
				
				if(argJSON){
					if(argJSON.length){
						$('resultInfo').set('html', argJSON.length+ ' events found');
					}else{
						$('resultInfo').set('html', '0 events found');
					}
				}else{
					$('resultInfo').set('html', '0 events found');
				}
			}.bind(this)
		});
		this.searchRequest.send();
	},
	
	requestDecade: function(argYr, argSelect){
		if(this.decadeRequest != null){
			this.decadeRequest.cancel();
		}
		
		this.decadeRequest = new Request.JSON({
			'url': 			this.requestURL,
			'method': 		'post',
			'data': 		'decade=' +argYr,
			'onSuccess': 	function(argJSON, argText){
				this.decadeEvents		= argJSON.events;
				this.currentDecade		= argYr;
				this.currentEventIndex	= -1;
				
				// Set up event switcher
				var _selectedIndex = this.setupEventSwitcher(argSelect);
				// Set the decade
				this.decade.set('text', argYr + ' - ' + (parseInt(argYr) + this.options.interval));
				
				var switchers		= this.eventSwitcher.getElements('li');
				var switchersNum	= switchers.length;
				
				if(switchersNum > 0){
					this.selectSwitcher(_selectedIndex);
					this.requestEvent(switchers[_selectedIndex].retrieve('eventId'));
					
					if(argSelect != 'first' && argSelect != 'last'){
						var _item	= this.timelineSlider.getItem(argYr);
						var _items	= $('timelineSlider').getElements('li');
						
						this.timelineSlider.posTimeline(_item.retrieve('index'));
						
						_items.each(function(argItm){
							argItm.removeClass('selected');
							argItm.removeClass('selectedSib');
						});

						if(_item.retrieve('index') == _items.length - 1){
							// last item
							_item.addClass('selectedSib');
							_item.getPrevious('li').addClass('selected');
						}else{
							_item.addClass('selected');
							_item.getNext('li').addClass('selectedSib');
						}
					}
					
				}else{
					// No events in this decade
					this.eventContainer.setStyle('opacity', 0);
					
				}
			}.bind(this)
		});
		this.decadeRequest.send();
	},
	
	requestEvent: function(argEventId){
		if(this.eventRequest != null){
			this.eventRequest.cancel();
		}
		
		this.eventRequest = new Request.JSON({
			'url': 			this.requestURL,
			'method': 		'post',
			'data': 		'EventID=' +argEventId,
			'onSuccess': 	function(argJSON, argText){
				this.renderEvent(argJSON);
			}.bind(this)
		});
		this.eventRequest.send();
	},
	
	renderEvent: function(argEvent){
		this.eventContainer.setStyle('opacity', 0);
		this.eventContainer.getElementById('imageCap').set('html', argEvent.EventImageCaption);
		this.eventContainer.getElementById('eventTitle').set('html', argEvent.EventTitle);
		if(argEvent.EventResizedImageFile){
			$('imageWrap').setStyle('display', 'block');
			$('imageCap').setStyle('display', 'block');
			$('contentScrollerWrapper').removeClass('noImage');
			this.eventContainer.getElementById('mainImage').setProperties({
				'src': this.options.imageFolderPath + argEvent.EventResizedImageFile,
				'alt': argEvent.EventImageCaption
			});
		}else{
			$('imageWrap').setStyle('display', 'none');
			$('imageCap').setStyle('display', 'none');
			$('contentScrollerWrapper').addClass('noImage');
		}
		var _niceDate;
		if(argEvent.EventDateOverride) {
			_niceDate = argEvent.EventDateOverride;
		}
		else {
			var _datePart = argEvent.EventDate.split('-');
			_niceDate		= _datePart[2]+ '-' +_datePart[1]+ '-' +_datePart[0];
		}
		var _contentText = '<p><strong>' + _niceDate + '</strong></p>' + argEvent.EventText;
		
		this.eventContainer.getElementById('description').set('html', _contentText);
		this.contentScroller.update();
		
		(Browser.Engine.trident) ? this.eventContainer.setStyle('opacity', 1) : this.eventContainer.tween('opacity', 1);
	}
});





/**
 ********************************************************
 * TIMELINE SLIDER
 ********************************************************
 */
var TimelineSlider = new Class({
	Implements: [Events, Options],
	
	/**
	 ********************************************************
	 * OPTIONS & VARS
	 ********************************************************
	 */
	options: {
		itemTag: 'li',
		interval: 150
	},
	
	// Refs
	timelineSliderWrapper: null,
	timelineSlider: null,
	
	// Classes
	drag: null,
	
	// Vars
	itemCount: 0,
	itemsWidth: 0,
	mouseDownTimestamp: null,
	mouseUpTimestamp: null,
	
	
	
	/**
	 ********************************************************
	 * CONSTRUCTOR
	 ********************************************************
	 */
	initialize: function(argTimelineSlider, argOpt){
		this.timelineSlider	= argTimelineSlider;
		this.setOptions(argOpt);
		
		this.timelineSliderWrapper = new Element('div', {
			'class': 'timelineSliderWrapper'
		});
		this.timelineSliderWrapper.wraps(this.timelineSlider);
		
		this.drag = new Drag.Move(this.timelineSlider, {
			'onDrag': this.timelineDragHndlr.bind(this),
			'onComplete': this.timelineCompleteHndlr.bind(this)
		});
	},
	
	
	
	/**
	 ********************************************************
	 * FUNCTIONS
	 ********************************************************
	 */
	addItem: function(argDecade){
		var _timelineEl = new Element(this.options.itemTag, {
			'html': 	argDecade,
			'events': 	{
				'mousedown': this.itemMouseDownHndlr.bind(this),
				'mouseup': this.itemMouseUpHndlr.bind(this)
			}
		});
		
		if(this.itemCount == 0) _timelineEl.addClass('selected');
		if(this.itemCount == 1) _timelineEl.addClass('selectedSib');
		
		_timelineEl.store('decade', argDecade);
		_timelineEl.store('index', this.itemCount);
		_timelineEl.inject(this.timelineSlider);
		
		this.itemsWidth +=
			_timelineEl.getSize().x +
			_timelineEl.getStyle('margin-left').toInt() +
			_timelineEl.getStyle('margin-right').toInt();
		
		this.timelineSlider.setStyle('width', this.itemsWidth);
		this.itemCount++;
		
		return _timelineEl;
	},
	
	posTimelineByDecade: function(argDecade){
		var _items			= this.timelineSlider.getElements(this.options.itemTag);
		var _selectedIndex	= null;
		
		// Remove selected class
		_items.each(function(argItm){
			argItm.removeClass('selected');
			argItm.removeClass('selectedSib');
		});
		// Set selected
		for(var i = 0; i < _items.length; i++){
			if(_items[i].retrieve('decade') == argDecade){
				var _selectedIndex = _items[i].retrieve('index');
				
				if(_selectedIndex == _items.length - 1){
					// last item
					_items[i].addClass('selectedSib');
					_items[i].getPrevious(this.options.itemTag).addClass('selected');
				}else{
					_items[i].addClass('selected');
					_items[i].getNext(this.options.itemTag).addClass('selectedSib');
				}
				// Found it
				break;
			}
		}
		this.posTimeline(_selectedIndex + 1);
	},
	
	posTimeline: function(argIndex){
		var _wrapperWidth		= this.timelineSliderWrapper.getStyle('width').toInt();
		var _left				= this.timelineSlider.getStyle('left').toInt();
		var _item				= this.timelineSlider.getElement(this.options.itemTag);
		var _itemWidth			=
			_item.getSize().x +
			_item.getStyle('margin-left').toInt() +
			_item.getStyle('margin-right').toInt();
		var _chosenItemIndex	= 0;
		
		if(argIndex != undefined){
			_chosenItemIndex = -argIndex;
		}else{
			_chosenItemIndex = Math.floor((_left - _wrapperWidth / 2) / _itemWidth);
			
			// Index check
			if(_chosenItemIndex >= 0)						_chosenItemIndex = -1;
			// Last decade cannot be selected
			if(_chosenItemIndex < -(this.itemCount - 1))	_chosenItemIndex = -(this.itemCount - 1);
			
			var _compareIndex	= Math.abs(_chosenItemIndex) - 1;
			var _selectedDacade	= null;
			var _items			= this.timelineSlider.getElements(this.options.itemTag);
			
			// Remove selected class
			_items.each(function(argItm){
				argItm.removeClass('selected');
				argItm.removeClass('selectedSib');
			});
			// Set selected
			for(var i = 0; i < _items.length; i++){
				if(_items[i].retrieve('index') == _compareIndex){
					_selectedDacade = _items[i].retrieve('decade');
					
					if(_items[i].retrieve('index') == _items.length - 1){
						// last item
						_items[i].addClass('selectedSib');
						_items[i].getPrevious(this.options.itemTag).addClass('selected');
					}else{
						_items[i].addClass('selected');
						_items[i].getNext(this.options.itemTag).addClass('selectedSib');
					}
					// Found it
					break;
				}
			}
			this.fireEvent('autoSelected', _selectedDacade);
		}
		
		// Index check
		if(_chosenItemIndex >= 0)						_chosenItemIndex = -1;
		// Last decade cannot be selected
		if(_chosenItemIndex < -(this.itemCount - 1))	_chosenItemIndex = -(this.itemCount - 1);
		
		this.timelineSlider.tween('left',  _chosenItemIndex * _itemWidth + _wrapperWidth / 2  + 'px');
	},
	
	getItem: function(argYear){
		var _item = this.timelineSlider.getElements(this.options.itemTag);
		
		for(var i = 0; i < _item.length; i++){
			if(_item[i].retrieve('decade') == argYear){
				return _item[i];
			}
		}
	},
	
	/**
	 ********************************************************
	 * EVENT HANDLER
	 ********************************************************
	 */
	timelineDragHndlr: function(argDragEl){
		argDragEl.setStyle('top', '0px');
	},
	
	timelineCompleteHndlr: function(argDragEl){
		this.posTimeline();
	},
	
	itemMouseDownHndlr: function(e){
		this.mouseDownTimestamp = $time();
	},
	
	itemMouseUpHndlr: function(e){
		this.mouseUpTimestamp = $time();
		
		var _interval = this.mouseUpTimestamp - this.mouseDownTimestamp;
		
		if(_interval < this.options.interval){
			// Click
			this.posTimeline((e.target.retrieve('index')) + 1);

			this.timelineSlider.getElements(this.options.itemTag).each(function(argItm){
				argItm.removeClass('selected');
				argItm.removeClass('selectedSib');
			});

			if(e.target.retrieve('index') == this.itemCount - 1){
				// last item
				e.target.addClass('selectedSib');
				e.target.getPrevious(this.options.itemTag).addClass('selected');
			}else{
				e.target.addClass('selected');
				e.target.getNext(this.options.itemTag).addClass('selectedSib');
			}
			e.target.fireEvent('selected', e);
			
		}else{
			// Nope, holding, do nothing
		}
	}
});





/**
 ********************************************************
 * CONTENT SCROLLER
 ********************************************************
 */
var ContentScroller = new Class({
	Implements: [Events, Options],
	
	/**
	 ********************************************************
	 * OPTIONS & VARS
	 ********************************************************
	 */
	
	// Options
	options: {
		scrollStep: 5
	},
	
	// Refs
	scrollContent: null,
	scrollbar: null,
	scrollKnob: null,
	
	// Classes
	slider: null,
	
	// Vars
	contentDimension: 0,
	contentScrollDimension: 0,
	
	
	
	/**
	 ********************************************************
	 * CONSTRUCTOR
	 ********************************************************
	 */
	initialize: function(argContent, argScrollbar, argScrollKnob, argOpt){
		this.setOptions(argOpt);
		this.scrollContent	= argContent;
		this.scrollbar		= argScrollbar;
		this.scrollKnob		= argScrollKnob;
		
		this.slider = new Slider(this.scrollbar, this.scrollKnob, {
			'mode': 'vertical',
			'onChange': this.scrollChange.bind(this)
		});
		
		this.scrollContent.addEvent('mousewheel', function(e){
			if(this.slider){
				if(e.wheel > 0){
					if(this.step > 0){
						this.step -= this.options.scrollStep;
						this.slider.set(this.step);
					}else{
						this.step = 0;
						this.slider.set(this.step);
					}
				}else if(e.wheel < 0){
					if(this.step < 100){
						this.step += this.options.scrollStep;
						this.slider.set(this.step);
					}else{
						this.step = 100;
						this.slider.set(this.step);
					}
				}
			}
		}.bind(this));
		
		this.update();
	},
	
	
	
	/**
	 ********************************************************
	 * FUNCTIONS
	 ********************************************************
	 */
	update: function(){
		this.contentDimension		= this.scrollContent.getSize().y;
		this.contentScrollDimension	= this.scrollContent.getScrollSize().y;
		this.step					= 0;
		
		this.scrollContent.scrollTo(0, 0);
		this.slider.set(0);
		
		if(this.contentScrollDimension <= this.contentDimension){
			this.scrollbar.setStyle('opacity', 0);
		}else{
			/*
			var _scrollContentRatio	= this.contentDimension / this.contentScrollDimension;
			var _knobHeight			= Math.round(this.scrollbar.getStyle('height').toInt() * _scrollContentRatio);
			*/
			//this.scrollKnob.setStyle('height', _knobHeight);
			this.scrollbar.setStyle('opacity', 0.7);
		}
	},
	
	
	
	/**
	 ********************************************************
	 * EVENT HANDLERS
	 ********************************************************
	 */
	scrollChange: function(argStep){
		this.scrollContent.scrollTo(0, argStep / 100 * (this.contentScrollDimension - this.contentDimension));
		this.step = argStep;
	}
});