container_elements = $$('#buttons_container .buttons');

function bttnMouseover(elem){
	img = elem.getElementsBySelector('img')[0];
	if (img.STATE == 2) {
		return;
	}
	url = new String(img.src).replace('_off','_on');
	className = new String(img.className).replace('_off','_on');
	img.STATE = 1;
	img.src = url;
	img.className = className;
}

function bttnMouseout(elem){
	img = elem.getElementsBySelector('img')[0];
	if (img.STATE == 2) {
		return;
	}
	url = new String(img.src).replace('_on','_off');
	className = new String(img.className).replace('_on','_off');
	img.STATE = 0;		
	img.src = url;	
	img.className = className;
}			

function bttnClick(elem){
	clearTimeout(auto_move_timer);
			
	container_elements.each(function(elem){
		img = elem.getElementsBySelector('img')[0];
		url = new String(img.src).replace('_on','_off');						
		className = new String(img.className).replace('_on','_off');
		img.className = className;
		img.STATE = 0;
		img.src = url;					
	});
	img = elem.getElementsBySelector('img')[0];
	url = new String(img.src).replace('_off','_on');
	className = new String(img.className).replace('_off','_on');
	img.STATE = 2;
	img.src = url;
	img.className = className;
	curpos = img.POSITION;
	elem.removeClassName('on');
	displayMW(curpos);
	
	auto_move_timer = setTimeout("updatePos(1)", 5000);
}

function findStickByPos(position){
	var baseElem;
	var hit = false;
	
	switch (position) {
		case 0: position=container_elements.length; break;
		case (container_elements.length + 1): position=1; break;
	}
	
	container_elements.each(function(elem){
		if(!hit){
			baseElem = elem;
			hit = true;
		}
		img = elem.getElementsBySelector('img')[0];

		if (img.POSITION == position){
			baseElem = elem;
		} 
		
	});
	
	return baseElem;
}

function updatePos(inc){
	bttnClick(findStickByPos(curpos+inc));
}

function displayMW(p){
	var dur = (Math.abs(p - lastpos)*.5);
	var l = $('top_image_window').getStyle('left');
	var t = $('top_image_window').getStyle('top');
	new Effect.Move ('top_image_strip',{ x: l-(947*p), y: t, mode: 'absolute', duration: dur});
	lastpos = p;
}

var pos = 1;
var curpos = 0;
var lastpos = 1;
var auto_move_timer = 0;

container_elements.each(function(elem){
	img = elem.getElementsBySelector('img')[0];
	img.STATE = 0;
	img.POSITION = pos++;
	elem.onmouseover = function () {bttnMouseover(elem);};
	elem.onmouseout = function () {bttnMouseout(elem);};
	elem.onclick=function () {bttnClick(elem);};
});

Event.observe(
	window, 
	'load', 
	function() {
		new Effect.Appear(
			'top_image_window', {
				duration: .5, 
				queue: 'parallel', 
				afterFinish: function(){ 
					updatePos(1); 
				}
			}
		);
		new Effect.Appear(
			'buttons_container', {
				duration: .5, 
				queue: 'parallel'
			}
		);
	}
);