// make new array with demo images
var demo_images = new Array('demo_img_1', 'demo_img_2', 'demo_img_3',
        'demo_img_4', 'demo_img_5', 'demo_img_6', 'demo_img_7',
        'demo_img_8', 'demo_img_9', 'demo_img_10', 'button1', 'button2');

var demo_steps = new Array('step_1', 'step_2', 'step_3');

function setOpacityZeroAll(array) {
    if (array == 'demo_images') array = demo_images;
    if (array == 'demo_steps') array = demo_steps;
    var object = null;
    for (var x = 0; x < array.length; x ++) {
        object = document.getElementById(array[x]);
        object.style.opacity = 0;
        object.style.MozOpacity = 0;
        object.style.KhtmlOpacity = 0;
        object.style.filter = "alpha(opacity=0)";
        hideObject(object);
    }
}

function hideObject(object) {
    object.style.visibility = 'hidden';
}

function showObject(object) {
    object.style.visibility = 'visible';
}

function moveImages() {
    // set img_1 top
    var main_height = document.getElementById('wrap').clientHeight;
    var lastTX = document.getElementById('wrap').offsetLeft;
    var object2 = null;
    for (var z = 0; z < demo_images.length; z++) {
        object2 = document.getElementById(demo_images[z]);
        showObject(object2);
        object2.style.top = main_height - object2.clientHeight - 570 + 'px';
        object2.style.left = (lastTX - 120) + 'px';
    }
    // show demo_steps elements;
    var object3 = null;
    for (var a = 0; a < demo_steps.length; a++) {
        object3 = document.getElementById(demo_steps[a]);
        showObject(object3);
    }
    
    var image1 = document.getElementById(demo_images[1]);
    var close_button = document.getElementById(demo_images[10]);
    var rp_button = document.getElementById(demo_images[11]);
    close_button.style.top = main_height - image1.clientHeight -350 + 'px'; // 220
    rp_button.style.top = main_height - image1.clientHeight -270 + 'px';    // 310
    /* image_1 left position */
    var image1_left = image1.style.left; image1_left = image1_left.substring(-1, 2);
    var close_button_left = lastTX + 300;
    close_button.style.left = close_button_left + 13 + 'px';
    rp_button.style.left = close_button_left + 'px';
}

function startDemo(opacStart, opacEnd) {
    moveImages();
    opacity(demo_images[0], opacStart, opacEnd, 200000);
    opacity(demo_steps[0], opacStart, opacEnd, 200000);
    setTimeout("opacity('" + demo_images[0] + "'," + 100 + "," +  0 + "," +  100000 + ")", 3000);
    setTimeout("opacity('" + demo_images[1] + "'," +  0 + "," +  100 + "," + 100000 + ")", 3000);

    setTimeout("opacity('" + demo_images[1] + "'," +  100 + "," +  0 + "," + 100 + ")", 4800);
    setTimeout("opacity('" + demo_images[2] + "'," +  0 + "," +  100 + "," + 100 + ")", 4799);

    setTimeout("opacity('" + demo_images[2] + "'," +  100 + "," +  0 + "," + 100 + ")", 5400);
    setTimeout("opacity('" + demo_images[3] + "'," +  0 + "," +  100 + "," + 100 + ")", 5399);

    setTimeout("opacity('" + demo_images[3] + "'," +  100 + "," +  0 + "," + 100 + ")", 6400);
    setTimeout("opacity('" + demo_images[4] + "'," +  0 + "," +  100 + "," + 100 + ")", 6399);

    /* Step1 -> Step2 */
    setTimeout("opacity('" + demo_steps[1] + "'," +  0 + "," +  100 + "," + 200000 + ")", 7400);
    setTimeout("opacity('" + demo_steps[0] + "'," +  100 + "," +  0 + "," + 200000 + ")", 8400);

    setTimeout("opacity('" + demo_images[4] + "'," +  100 + "," +  0 + "," + 100 + ")", 9800);
    setTimeout("opacity('" + demo_images[5] + "'," +  0 + "," +  100 + "," + 100 + ")", 9799);

    setTimeout("opacity('" + demo_images[5] + "'," +  100 + "," +  0 + "," + 100 + ")", 10400);
    setTimeout("opacity('" + demo_images[4] + "'," +  0 + "," +  100 + "," + 100 + ")", 10399);

    setTimeout("opacity('" + demo_images[4] + "'," +  100 + "," +  0 + "," + 100 + ")", 11200);
    setTimeout("opacity('" + demo_images[6] + "'," +  0 + "," +  100 + "," + 100 + ")", 11199);

    /* Step2 -> Step3 */
    setTimeout("opacity('" + demo_steps[2] + "'," +  0 + "," +  100 + "," + 200000 + ")", 12000);
    setTimeout("opacity('" + demo_steps[1] + "'," +  100 + "," +  0 + "," + 200000 + ")", 13000);

    setTimeout("opacity('" + demo_images[6] + "'," +  100 + "," +  0 + "," + 100 + ")", 15200);
    setTimeout("opacity('" + demo_images[7] + "'," +  0 + "," +  100 + "," + 100 + ")", 15199);

    setTimeout("opacity('" + demo_images[7] + "'," +  100 + "," +  0 + "," + 100 + ")", 16700);
    setTimeout("opacity('" + demo_images[8] + "'," +  0 + "," +  100 + "," + 100 + ")", 16699);

    setTimeout("opacity('" + demo_images[8] + "'," +  100 + "," +  0 + "," + 100 + ")", 17300);
    setTimeout("opacity('" + demo_images[7] + "'," +  0 + "," +  100 + "," + 100 + ")", 17299);

    setTimeout("opacity('" + demo_images[7] + "'," +  100 + "," +  0 + "," + 100 + ")", 18300);
    setTimeout("opacity('" + demo_images[9] + "'," +  0 + "," +  100 + "," + 100 + ")", 18299);

    setTimeout("opacity('" + demo_images[10] + "'," +  0 + "," +  100 + "," + 100000 + ")", 19300);
    setTimeout("opacity('" + demo_images[11] + "'," +  0 + "," +  100 + "," + 100000 + ")", 19300);
}

function endDemo() {
    setTimeout("opacity('" + demo_images[9] + "'," +  100 + "," +  0 + "," + 50000 + ")", 50);
    setTimeout("opacity('" + demo_images[10] + "'," +  100 + "," +  0 + "," + 50000 + ")", 50);
    setTimeout("opacity('" + demo_images[11] + "'," +  100 + "," +  0 + "," + 50000 + ")", 50);
    setTimeout("opacity('" + demo_steps[2] + "'," +  100 + "," +  0 + "," + 50000 + ")", 50);
    setTimeout("clearAllImages()", 200);
}

function restartDemo() {
    // end demo first
    endDemo();
    // restart demo
    setTimeout("startDemo(0, 100)", 1000);
}

function clearAllImages() {
    // clear all images from the page
    var object = null;
    for (var t = 0; t < demo_images.length; t ++) {
        object = document.getElementById(demo_images[t]);
        hideObject(object);
    }
    for (var u = 0; u < demo_steps.length; u++) {
        object = document.getElementById(demo_steps[u]);
        hideObject(object);
    }
}

function opacity(id, opacStart, opacEnd, millisec) {
	//speed for each frame
	var speed = Math.round(millisec / 15000);
	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)
}