var ro = new Object();


ro.init = function(){
	pic1 = new Image();
	pic2 = new Image();
	pic3 = new Image();

	pic1.src = '../../style/img/features-01.jpg';
	pic2.src = '../../style/img/features-02.jpg';
	pic3.src = '../../style/img/features-03.jpg';


	ro.items = document.getElementById('rollovers').getElementsByTagName('li');
	ro.img = document.getElementById('features');
	for(i=0; i<ro.items.length; i++){
		a = ro.items[i].getElementsByTagName('a')[0];
		YAHOO.util.Event.on(a, 'mouseover', ro.showTokens, false);
		if(i<7){
			ro.items[i].getElementsByTagName('span')[0].style.display = 'block';
		}
	}
}

ro.showTokens = function(e){
	node = YAHOO.util.Event.getTarget(e).parentNode.parentNode;
	for(i=0; i<ro.items.length; i++){
		ro.items[i].getElementsByTagName('span')[0].style.display = 'none';
		ro.items[i].getElementsByTagName('span')[1].style.display = 'none';
		ro.items[i].getElementsByTagName('div')[0].style.display = 'none';
		if(node == ro.items[i]){
			ro.items[i].getElementsByTagName('span')[1].style.display = 'block';
			ro.items[i].getElementsByTagName('div')[0].style.display = 'block';
			idx = i;
		}
	}
	switch(idx){
		case 0:
		case 1:
		case 2:
		case 3:
		case 4:
		case 5:
		case 6:
			ro.img.src = ro.img.src.replace(/-\d\d/, '-01');
			for(i=0; i<7; i++){
				ro.items[i].getElementsByTagName('span')[0].style.display = 'block';
			}
			break;
		case 7:
		case 8:
		case 9:
			ro.img.src = ro.img.src.replace(/-\d\d/, '-02');
			for(i=7; i<10; i++){
				ro.items[i].getElementsByTagName('span')[0].style.display = 'block';
			}
			break;
		case 10:
		case 11:
		case 12:
			ro.img.src = ro.img.src.replace(/-\d\d/, '-03');
			for(i=10; i<13; i++){
				ro.items[i].getElementsByTagName('span')[0].style.display = 'block';
			}
			break;
	}
}

YAHOO.util.Event.on(window, 'load', ro.init, false);