///////////////////////////////////////////////////////////
// Class SimpleHtmlSnippetUpdater
// 
// updates an html element with an html snippet
///////////////////////////////////////////////////////////


var SimpleHtmlSnippetUpdater = Class.create({
	
	///////////////////////////////////////////////////////////
	// initialize
	///////////////////////////////////////////////////////////
	
	initialize:function(htmlElement, snippetURL, defaultId, numItems, autoWalk, timeout){
		
		// which element should be updated
		this.htmlElement = htmlElement;
		
		this.htmlElement.addClassName('js')
		
		// what template should be used
		this.snippetURL = snippetURL;
		
		// use this ID as starting counter
		this.counter = defaultId;
		
		// number of items
		this.numItems = numItems;
		
		if(autoWalk){
			this.autoWalk = autoWalk;
			this.timeout = timeout;
			this.walk();
		}
		
		this.fadeIn(this.htmlElement);
		
		$('blueScreen').addClassName('js');
		
	},
	
	
	///////////////////////////////////////////////////////////
	// go back
	///////////////////////////////////////////////////////////	
	
	prevItem:function(){
		// don't go below 1
		if(this.counter > 1){
			this.counter--;
			this.getHTMLsnippet();
		}else{
			this.counter = this.numItems;
			this.getHTMLsnippet();
		}
	},
	
	
	///////////////////////////////////////////////////////////
	// go forward
	///////////////////////////////////////////////////////////	

	nextItem:function(){
		// go as far as possible
		// do -1 because 'item 0' was loaded first
		if(this.counter < this.numItems){
			this.counter++;
		}else if(this.counter == this.numItems){
			this.counter = 1;
		}	
		
		this.getHTMLsnippet();
	},
	
	
	///////////////////////////////////////////////////////////
	// auto walk
	///////////////////////////////////////////////////////////
		
	walk:function(){
		
		// start over if at the end
		window.clearTimeout(this.timeoutId);
		this.timeoutId = this.nextItem.bind(this).delay(this.timeout);
	},
	
	
	///////////////////////////////////////////////////////////
	// pause
	///////////////////////////////////////////////////////////
	play:function(){
		this.autoWalk = true;
		this.nextItem();
	},
	
	pause:function(){
		window.clearTimeout(this.timeoutId);
		this.autoWalk = false;
	},
	
	
	///////////////////////////////////////////////////////////
	// get html snippet
	///////////////////////////////////////////////////////////
	
	getHTMLsnippet:function(){
		
		this.setLoadingMessage();

		// new Ajax request for the project list
		new Ajax.Request(this.snippetURL + this.counter + '/', {
			// if success
			onSuccess: function(transport) {
				this.htmlObject = transport.responseText;
				// make it happen
				this.startRenderingSnippet();
			}.bind(this)
		});
	},
	
	
	//////////////////////////////////////////////////////////
	// renderPage
	///////////////////////////////////////////////////////////

	startRenderingSnippet:function(){
		//this.setHeights();
		this.fadeOut($(this.htmlElement));
	},
	
	
	// set the height of the complete updater
	setHeights:function(){		

			var h = this._height;
			var nh = this.htmlElement.getHeight() + 40;
			
			if(nh <= 300){
				this.htmlElement.up().setStyle({ 'height': '300px' });
			}else{
				this.htmlElement.up().setStyle({ 'height': nh+'px' });
			}
	},
	
	//////////////////////////////////////////////////////////
	// fade items in
	///////////////////////////////////////////////////////////
	

	fadeOut:function(el){
		//this.setHeights();
		this.renderSnippet();
	},
	
	fadeIn:function(el){
		
		$('blueScreen').show()
		
		this.equalizeHeights();

		// init clickblocks
		initClickBlocks();
	},
	
	
	
	//////////////////////////////////////////////////////////
	// equalizeHeights
	///////////////////////////////////////////////////////////
		
	equalizeHeights:function(){
		
		var li = this.htmlElement.down('ul').childElements();
		var h = 0;
		
		li.invoke('hide');
		
		// if there's only 1 item
		if(li.length == 1){
			
			// set it's height
			li[0].setStyle({'height': li[0].getHeight()+'px'})
		
		// if there are more then 1 items
		}else{
		
			// loop through list-items
			for(var i=0; i<li.length; i++){
			
				// find the element
				var j = li[i];
			
				// reset height for each row
				if(i%2 == 0)	h = 0;

				// find the biggest in the row
				if(j.getHeight() > h){
				
					// update height var
					h = j.getHeight();
				}
			
				if(i%2 == 1){
					// set the height
					li[i].setStyle('height:'+h+'px');
					li[i-1].setStyle('height:'+h+'px');
				}
			}
		}
		
		
		// fade the list-item in
		li.each(function(e){
			e.show();
			new Effect.Fade('blueScreen', { duration: .5 });
		})
		
		
		
		this._height = this.htmlElement.up().getHeight() // needs tweaking
		this._IEheight = this.htmlElement.up().getHeight() // needs tweaking
		
		this.setHeights();
	},


	//////////////////////////////////////////////////////////
	// renderSnippet
	///////////////////////////////////////////////////////////
	
	renderSnippet:function(){
		
		// update the htmlElement, just wait a bit
		$(this.htmlElement).update(this.htmlObject);
		
		this.fadeIn($(this.htmlElement))
			
		// auto walk
		if(this.autoWalk){
			this.walk();
		}
	},
	
	
	//////////////////////////////////////////////////////////
	// set loading message
	///////////////////////////////////////////////////////////
	
	setLoadingMessage:function(){
		//
	}
});
///////////////////////////////////////////////////////////
// Class SimpleHtmlSnippetUpdater
// 
// updates an html element with an html snippet
///////////////////////////////////////////////////////////


var SimpleControls = Class.create({
	
	///////////////////////////////////////////////////////////
	// initialize
	///////////////////////////////////////////////////////////
	
	initialize:function(updaterClass, prevBtn, nextBtn, playBtn, pauseBtn){

		this.updaterClass = updaterClass;
		
		if(prevBtn){
			this.prevBtn = prevBtn;
			$(prevBtn).observe('click', this.onPrevBtnClick.bind(this));
		}
		
		if(nextBtn){
			this.nextBtn = nextBtn;
			$(nextBtn).observe('click', this.onNextBtnClick.bind(this));
			
		}
		
		if(playBtn){
			this.playBtn = playBtn;
			$(playBtn).observe('click', this.onPlayBtnClick.bind(this));
		}	
		
		if(pauseBtn){
			this.pauseBtn = pauseBtn;
			$(pauseBtn).observe('click', this.onPauseBtnClick.bind(this));
		}
		
	},
	
	
	///////////////////////////////////////////////////////////
	// go back
	///////////////////////////////////////////////////////////	
	
	onPrevBtnClick:function(evt){
		Event.stop(evt);
		this.updaterClass.prevItem();
	},
	
	
	///////////////////////////////////////////////////////////
	// go forward
	///////////////////////////////////////////////////////////	
	
	onNextBtnClick:function(evt){
		Event.stop(evt);
		this.updaterClass.nextItem();
	},


	///////////////////////////////////////////////////////////
	// play
	///////////////////////////////////////////////////////////	

	onPlayBtnClick:function(evt){
		Event.stop(evt);
		this.updaterClass.play();
	},


	///////////////////////////////////////////////////////////
	// pause
	///////////////////////////////////////////////////////////	

	onPauseBtnClick:function(evt){
		Event.stop(evt);
		this.updaterClass.pause();
	}
});
///////////////////////////////////////////////////////////
// Class VisualToggler
///////////////////////////////////////////////////////////


var VisualToggler = Class.create({
	
	///////////////////////////////////////////////////////////
	// initialize
	///////////////////////////////////////////////////////////
	
	initialize:function(el){
		
		this.el = el;
		this.currentItem = 0;
		
		this.items = el.childElements();
		
		if(this.items.length == 1)
			return false;

		this.hideAllOthers();
		
		this.el.observe('mouseover', this.onRollOver.bind(this));
		this.el.observe('mouseout', this.onRollOut.bind(this));

	},
	
	
	///////////////////////////////////////////////////////////
	// onRollOver
	///////////////////////////////////////////////////////////	
	
	onRollOver:function(evt){
		this.items[0].hide();
		this.items[1].show();
	},
	
	
	///////////////////////////////////////////////////////////
	// onRollOut
	///////////////////////////////////////////////////////////
	
	onRollOut:function(evt){
		this.items[0].show();
		this.items[1].hide();
	},
	
	
	///////////////////////////////////////////////////////////
	// hideAllOthers
	///////////////////////////////////////////////////////////
	
	hideAllOthers:function(){
		this.items.each(function(el){
			
			if(el != $(this.items[this.currentItem])){
				el.hide();
			}
		}.bind(this))	
	}
});