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 + ")";
}

function shiftOpacity(id, millisec) {
	//if an element is invisible, make it visible, else make it ivisible
	if(document.getElementById(id).style.opacity == 0) {
		opacity(id, 0, 100, millisec);
	} else {
		opacity(id, 100, 0, millisec);
	}
}

function blendimage(divid, imageid, imagefile, millisec) {
	var speed = Math.round(millisec / 100);
	var timer = 0;
	
	//set the current image as background
	document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
	
	//make image transparent
	changeOpac(0, imageid);
	
	//make new image
	document.getElementById(imageid).src = imagefile;

	//fade in image
	for(i = 0; i <= 100; i++) {
		setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
		timer++;
	}
}

function currentOpac(id, opacEnd, millisec) {
	//standard opacity is 100
	var currentOpac = 100;
	
	//if the element has an opacity set, get it
	if(document.getElementById(id).style.opacity < 100) {
		currentOpac = document.getElementById(id).style.opacity * 100;
	}

	//call for the function that changes the opacity
	opacity(id, currentOpac, opacEnd, millisec)
}
function Init() {
    id2 = document.getElementById("dWeb");
    id2.style.display = "none";
}

function SetViewer(obj, source, index) {
    ib1 = document.getElementById("ib1");
    id1 = document.getElementById("dHome");
    if (index == 1) {
        ib1.src = source;
    } else {
        ib1.src = "images/buttons/viewer_home_off.png";
    }
    ib2 = document.getElementById("ib2");
    id2 = document.getElementById("dWeb");
    if (index == 2) {
        ib2.src = source;
    } else {
        ib2.src = "images/buttons/viewer_web_off.png";
    }
    ib3 = document.getElementById("ib3");
    id3 = document.getElementById("dMarketing");
    if (index == 3) {
        ib3.src = source;
    } else {
        ib3.src = "images/buttons/viewer_marketing_off.png";
    }
    ib4 = document.getElementById("ib4");
    id4 = document.getElementById("dDatabase");
    if (index == 4) {
        ib4.src = source;
    } else {
        ib4.src = "images/buttons/viewer_database_off.png";
    }
    ib5 = document.getElementById("ib5");
    id5 = document.getElementById("dTechnology");
    if (index == 5) {
        ib5.src = source;
    } else {
        ib5.src = "images/buttons/viewer_technology_off.png";
    }
    
    if (document.getElementById("hindex").value != index) {

        switch (index) {
            case 1: id1.style.display = "block"; opacity('dHomeOrange', 0, 75, 500); id2.style.display = "none"; id3.style.display = "none"; id4.style.display = "none"; id5.style.display = "none"; break;
            case 2: id1.style.display = "none"; id2.style.display = "block"; opacity('dWebOrange', 0, 75, 500); id3.style.display = "none"; id4.style.display = "none"; id5.style.display = "none"; break;
            case 3: id1.style.display = "none"; id2.style.display = "none"; id3.style.display = "block"; opacity('dMarketingOrange', 0, 75, 500); id4.style.display = "none"; id5.style.display = "none"; break;
            case 4: id1.style.display = "none"; id2.style.display = "none"; id3.style.display = "none"; id4.style.display = "block"; opacity('dDatabaseOrange', 0, 80, 500); id5.style.display = "none"; break;
            case 5: id1.style.display = "none"; id2.style.display = "none"; id3.style.display = "none"; id4.style.display = "none"; id5.style.display = "block"; opacity('dTechnologyOrange', 0, 75, 500); break;

            //case 1: opacity('dHome', 0, 100, 1000); opacity('dWeb', 0, 0, 1); opacity('dMarketing', 0, 0, 1); opacity('dDatabase', 0, 0, 1); opacity('dTechnology', 0, 0, 1); break;  
            //case 2: opacity('dHome', 0, 0, 1); opacity('dWeb', 0, 100, 1000); opacity('dMarketing', 0, 0, 1); opacity('dDatabase', 0, 0, 1); opacity('dTechnology', 0, 0, 1); break;  
            //case 3: opacity('dHome', 0, 0, 1); opacity('dWeb', 0, 0, 1); opacity('dMarketing', 0, 100, 1000); opacity('dDatabase', 0, 0, 1); opacity('dTechnology', 0, 0, 1); break;  
            //case 4: opacity('dHome', 0, 0, 1); opacity('dWeb', 0, 0, 1); opacity('dMarketing', 0, 0, 1); opacity('dDatabase', 0, 100, 1000); opacity('dTechnology', 0, 0, 1); break;  
            //case 5: opacity('dHome', 0, 0, 1); opacity('dWeb', 0, 0, 1); opacity('dMarketing', 0, 0, 1); opacity('dDatabase', 0, 0, 1); opacity('dTechnology', 0, 100, 1000); break;  
        }
    }
    document.getElementById("hindex").value = index;
    //obj.src = source;
}

function ShowFeature(i, obj, src_s, src_h) {
    ot1 = document.getElementById("if_h");
    ot1.src = src_h;
    od1 = document.getElementById("ib1");
    od2 = document.getElementById("df1");
    od3 = document.getElementById("df2");
    od4 = document.getElementById("dfOL");
    od5 = document.getElementById("dfSQL");
    SetImgSource(obj, src_s);
    switch (i) {
        case 1: od1.style.display = "none"; od2.style.display = "block"; od3.style.display = "block"; od4.style.display = "none"; od5.style.display = "none"; break;
        case 2: od1.style.display = "block"; od2.style.display = "none"; od3.style.display = "none"; od4.style.display = "none"; od5.style.display = "none"; break;
        case 3: od1.style.display = "none"; od2.style.display = "none"; od3.style.display = "none"; od4.style.display = "block"; od5.style.display = "none"; break;
        case 4: od1.style.display = "none"; od2.style.display = "none"; od3.style.display = "none"; od4.style.display = "none"; od5.style.display = "block"; break;
    }
}

function ShowDiv(iDiv) {
    oDiv1 = document.getElementById("DivP");
    oDiv2 = document.getElementById("DivPL");
    switch (iDiv) {
        case 1: oDiv1.style.display = "block"; oDiv2.style.display = "none"; break;
        case 2: oDiv1.style.display = "none"; oDiv2.style.display = "block"; break;
    }
}