//pre-load the two main images before the page loads
image1 = new Image();
image1.src ="images/octopus_big.jpg";
image2 = new Image();
image2.src = "images/camouflage3.jpg";

var imganimated = new Array();
var imgstatic = new Array();

//the animated images are pre-loaded in the background, starting half a second after the page loads
imganimated[1] = 'images/peacock-animated.gif';
imganimated[2] = 'images/octopus-animated.gif';
imganimated[3] = 'images/pepe-animated.gif';
imganimated[4] = 'images/buffalo-animated.gif';
imganimated[5] = 'images/birds-animated.gif';

imgstatic[1] = 'images/peacock-frame.jpg';
imgstatic[2] = 'images/octopus-frame.jpg';
imgstatic[3] = 'images/pepe-frame.jpg';
imgstatic[4] = 'images/buffalo-frame.jpg';
imgstatic[5] = 'images/birds-frame.jpg';

//setTimeout("preloader()",500);

setTimeout("preloader2(1)",500);

function preloader2(i) {
	var img = new Image();
	img.src = imganimated[i];
	if(i<5) { 
		i++;
		setTimeout('preloader2('+i+')',500);
	};
}

function preloader() {
	var img = new Array();
	var i;
	for(i=1;i<6;i++) {
		img[i] = new Image();
		img[i].src = imganimated[i];
	}
}

function changeclass(id, newclassname) {
	document.getElementById(id).className = newclassname;
};

function proj(project,toggle) {
	if (navigator.appName.substring(0,9) == "Microsoft"){ //IE doesn't work right with CSS:hovers, so we do it manually
		var object = document.getElementById('proj'+project).style;
		var opac;
		if (toggle=='1') {
			opac = 75;
		} else {
			opac = 50;
		}
		object.opacity = (opac / 100); 
		object.MozOpacity = (opac / 100); 
		object.KhtmlOpacity = (opac / 100); 
		object.filter = "alpha(opacity=" + opac + ")"; 
		
		if (toggle=='1') {
			object.backgroundImage='url('+imganimated[project]+')';
		} else {
			object.backgroundImage='url('+imgstatic[project]+')';
		}
	}
}

function octo(toggle) {
	var speed = 500;
	if (toggle=='1') {
		opacity('textinbar',100,0,speed);
		opacity('projectbuttons',100,0,speed);
	} else {
		opacity('textinbar',0,100,speed);
		opacity('projectbuttons',0,100,speed);
	}
}

function opacity(id, opacStart, opacEnd, millisec) { 
    //speed for each frame 
    var speed = Math.round(millisec / 100); 
    var timer = 0; 

    //determine the direction for the blending, if start and end are the same nothing happens 
    if(opacStart > opacEnd) { 
        for(i = opacStart; i >= opacEnd; i--) { 
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed)); 
            timer++; 
        } 
    } else if(opacStart < opacEnd) { 
        for(i = opacStart; i <= opacEnd; i++) 
            { 
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed)); 
            timer++; 
        } 
    } 
} 

//change the opacity for different browsers 
function changeOpac(opacity, id) { 
	var object = document.getElementById(id).style; 
    object.opacity = (opacity / 100); 
    object.MozOpacity = (opacity / 100); 
    object.KhtmlOpacity = (opacity / 100); 
    object.filter = "alpha(opacity=" + opacity + ")"; 
}