// JavaScript Document

// Content Names - must match image filenames
items = new Array("chtrader", "carpentaria", "forest", "margo", "unique", "ecommerce", "portal", "vie", "belena", "goldenedge", "afxm");

// Content Titles
titles = new Array("CHTrader", "Carpentaria Exploration Limited", "Enchanted Forest", "Natural Therapies", "Unique Interiors", "eCommerce Store", "Student Portal", "Vie Therapies", "Belena, Investing in Minerals", "Golden Edge Trader", "assetFXmanager");


// Preload images
if (document.images){
	preload_image_object = new Image();
	
	// set image url
	image_url = new Array(items.length);
	
	for (i = 0; i < items.length; i++){
		image_url[i] = "images/portfolio/" + items[i] + "Large.gif";
	}
	
	for (y = 0; y < items.length; y++){
		preload_image_object.src = image_url[y];
	}
}


var itemNo = 0;

function play(){
	stop();
	
	document.getElementById('playpause').innerHTML = "<a onMouseDown='javascript:stop()'><img src='images/portfolio/pause.gif' alt='pause' /></a>";
	
	next();
	playShow = setInterval("next();", 10000);
}

function forward(){
	stop();
	
	if (itemNo == (items.length)){
		load(0);
	} else {
		load(itemNo);
	}
}

function back(){
	stop();
	
	if (itemNo == 0){
		load(items.length - 2);
	} else if (itemNo == 1){
		load(items.length - 1);
	} else {
		load(itemNo - 2);
	}
}

function next(){
	load(itemNo);
}

function stop(){
	document.getElementById('playpause').innerHTML = "<a onMouseDown='javascript:play()'><img src='images/portfolio/play.gif' alt='play' /></a>";
	
	if (typeof playShow != "undefined") {
		clearInterval(playShow);
	}
}

function load(id){
	if (id == (items.length - 1)){
		itemNo = 0;
	} else {
		itemNo = id + 1;
	}
	
	if (typeof swapInterval != "undefined") {
		clearInterval(swapInterval);
	}
	
	// If content is currently being displayed, fade out
	if (document.getElementById('content').style.opacity == 1) {
		opacity('content', 100, 0, 300);
	}
	
	for (i = 0; i < items.length; i++) {
		document.getElementById('img' + items[i]).style.borderWidth = '0';
		document.getElementById('img' + items[i]).style.margin = '7px';
	}
	
	// Set interval timer to test when content is completely faded out
	swapInterval = setInterval("swap('" + id + "')", 100);
}

function swap(id){
	// If content is not being displayed
	if (document.getElementById('content').style.opacity == 0) {
		// Change thumb
		document.getElementById('img' + items[id]).style.borderColor = '#FFFFFF';
		document.getElementById('img' + items[id]).style.borderWidth = '5px';
		document.getElementById('img' + items[id]).style.margin = '2px';
		
		// Change content & fade in
		document.getElementById('content').innerHTML = document.getElementById(items[id]).innerHTML;
		
		opacity('content', 0, 100, 300);
		clearInterval(swapInterval);
	}
}

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