// Used on cinema landing page and festival landing page.
// Dependencies: Scriptaculous w/Slider Control, SideScroller 
//document.observe('dom:loaded', function(){
Event.observe(window, 'load', function(){
	if($$('#highlights_frame ul.cinema_teasers').first().empty()){
		return;// element check
	}
	
	$('highlights_wrap').removeClassName('nojs'); // remove the nojs css adjustment flag.
	
	// init sidescroller as global
	ss = new SideScroller('highlights_frame', {durationPerSlide: 0.5, restAlignment: 'left'});
	var slideCount = ss.slides.length;
	
	// setup slider numbers
	var highlight_numbers = $('highlights_numbers');
	for(var i =1; i <= slideCount; i++){
		var elLi = new Element('li').update(i);
		if(i==1){elLi.addClassName('selected');}
		// add click event to numbers
		elLi.observe('click', function(e){
			var number = parseInt(this.firstChild.nodeValue);
			slider.setValue(number-1);// convert to zero-based and move handle.
		});
		
		highlight_numbers.appendChild(elLi);
	}
	//highlight_numbers.makePositioned();

	// init slider as global
	slider = new Control.Slider('highlights_handle','highlights_track',{range:$R(0, slideCount-1),
		values:$R(0, slideCount-1),
		onChange:function(v){
			if(ss.isMoving){ss.stopMoving();} // ADD user protection
			ss.moveTo(v);
			// highlight "selected" number
			highlight_numbers.childElements().invoke('removeClassName', 'selected');
			highlight_numbers.childNodes[v].addClassName('selected');
		}
	});
});