var iconsArray = new Array();

function fillIconsArray(index, butId, src1, src2, fon, content) {
	iconsArray[index] = new Array();
	iconsArray[index][0] = butId;
	iconsArray[index][1] = src1;
	iconsArray[index][2] = src2;
	iconsArray[index][3] = fon;
	iconsArray[index][4] = content;}

fillIconsArray(0, 'butt1','images/butt1.gif','images/butt1u.gif','images/fon1.jpg','content1');
fillIconsArray(1, 'butt2','images/butt2.gif','images/butt2u.gif','images/fon2.jpg','content2');
fillIconsArray(2, 'butt3','images/butt3.gif','images/butt3u.gif','images/fon3.jpg','content3');
fillIconsArray(3, 'butt4','images/butt4.gif','images/butt4u.gif','images/fon4.jpg','content4');

function preloadOneImage(src) {
	var oneImage = new Image ();
	oneImage.src = src;
}

function preload() {
	for (var i = 0; i < iconsArray.length; i++)
		{
		preloadOneImage(iconsArray[i][1]);
		preloadOneImage(iconsArray[i][2]);
		preloadOneImage(iconsArray[i][3]);
		}
}

preload();

var curIndex = 0;

function swapButt(buttIndex,buttOn) {
	if (curIndex != buttIndex) {
		document.getElementById(iconsArray[curIndex][0]).src = iconsArray[curIndex][buttOn?2:1];
		document.getElementById(iconsArray[buttIndex][0]).src = iconsArray[buttIndex][buttOn?1:2];
	}
}

function setState() {
	for (var i = 0; i < iconsArray.length; i++)
		{
		document.getElementById(iconsArray[i][0]).src = iconsArray[i][i != 0?2:1];
		showContent(i,false);
		}
		changeFon();
}

function clickButt(buttIndex) { 
	swapButt(buttIndex,true)
	var oldIndex = curIndex;
	curIndex=buttIndex;
	changeFon(oldIndex);	
}

function showContent(index,show) {
	document.getElementById(iconsArray[index][4]).style.display = show?'':'none';
}

function changeFon(prevIndex) {
	document.getElementById('fon').src = iconsArray[curIndex][3];
		if (prevIndex!=undefined) {
		showContent(prevIndex,false);
		}
	showContent(curIndex,true);
}