var gl_Timer = null;

function $(el) {
	return document.getElementById(el);
}

var cycle = (function(s, e) {
	var c = 0;
	return function(s, e) {
		return ( ++c > e || c < s) ? c = s : c;
	}
})();

function gl_getHands() {
	var chidls = $('gl').childNodes;
	var h = [];
	for(var i = 0, l = chidls.length; i < l; i ++) {
		if(chidls[i].tagName == 'LI') h.push(chidls[i]);
	}
	return h;
}


function gl_setEvents() {
	$('gl').onmouseover = function() {
		clearTimeout(gl_Timer);
	}
	
	$('gl').onmouseout = function(event) {
		//if($checkEvent(event || window.event, $('gl'))) gl_auto();  // mouseout does not work correctly :(
	}
	
	var hands = gl_getHands();	
	for(var i = 0, l = hands.length; i < l; i ++) {
		(function(i) {
			hands[i].onclick = function() {
				gl_show(i);
			}
		})(i);
	}
}

function gl_auto() {
	clearTimeout(gl_Timer);
	gl_show(cycle(0, 2));
	gl_Timer = setTimeout(gl_auto, 4000);
}

function gl_show(index) {
	var hands = gl_getHands();
	var hand = hands[index];
	
	for(var i = 0, l = hands.length; i < l; i ++) {
		hands[i].className = '';
	}
	
	hands[index].className = 'active';
}

function $checkEvent(event, element) {
	var related = event.relatedTarget;
	if (related == undefined) return true;
	if (related === false) return false;
	return (typeof element != 'document' && related != element && related.prefix != 'xul' && !hasChild(element, related));
};

function hasChild(element, child) {
	if(!child) return false;
	var childs = element.getElementsByTagName(child.tagName);
	for(var i in childs) {
		//alert(childs[i]);
		if(childs[i] == child) return true;
	}
	return false;
}

gl_auto();
gl_setEvents();

/*

// can we use mootools ?
// here correct-working mootools based solution

var Bookmarks = new Class({
	
	Implements: [Events, Options],
	
	options: {
		active: 'active',
		auto: 3000
	},
	
	initialize: function(handlers, contents, options) {
		this.setOptions(options);
		this.handlers = [];
		this.contents = [];
		this.timer = null;
		
		handlers.each(function(handler, index) {
			this.attach(handler, contents[index]);
		}.bind(this));
		
		if(this.options.auto) this.auto();
	},
	
	// Usefull for adding new, dynamicly created bookmarks..
	attach: function(handler, content) {
		this.handlers.include(handler);
		this.contents.include(content);
		handler.addEvent('click', this.show.bind(this, [this.handlers.indexOf(handler)]));
		var mouseenter = function() { $clear(this.timer) };
		var mouseleave = this.auto();
		handler.addEvent('mouseenter', mouseenter.bind(this));
		content.addEvent('mouseenter', mouseenter.bind(this));
		handler.addEvent('mouseleave', mouseleave.bind(this));
		content.addEvent('mouseleave', mouseleave.bind(this));
	},
	
	show: function(index) {
		this.handlers.each(function(handler, i) {
			handler.removeClass(this.options.active);
		}.bind(this));

		this.handlers[index].addClass(this.options.active);
	},
	
	auto: function() {
		if(!this.options.auto) return;
		$clear(this.timer);
		this.timer = function() {
			if(!this.index) this.index = 0;
			if(this.index >= this.handlers.length) this.index = 0;
			this.show(this.index ++);
		}.periodical(this.options.auto, this);
	}
	
});


window.addEvent('domready', function() {
	var handlers = $('gl').getChildren();
	var contents = $('gl').getElements('ul');
	
	var bm = new Bookmarks(handlers, contents);

})
*/