//preload images. array is defined on parent html file
var mooImages = new Asset.images(imgArray, {
    onComplete: function(){
        //alert('All images loaded!');
    }
});

window.addEvent('domready', function() {
/*iterate thru bio elements and set opacity to fix ie */
$$('.op').setStyle('opacity', 0);
   $('div3').setStyle('opacity', 1);	
   $('previous').setStyle('opacity', 0);
   
});

var visibleDiv = $("div1");
var increment = 0;
var slidertotal = imgArray.length-1;
var inited = false;
var fadeDuration = 1000;
var arrowOffOpacity = 0;

function manageNavigation(direction) {
	if(direction == "next") {
		if(increment<slidertotal) {
		  increment++;
		  toggle(imgArray[increment]);
		} else {
			//code
		}
	} else {
		if(increment>0) {
		    increment--;
		    toggle(imgArray[increment]);
		} else {
			//code
		}
	}
	//manage arrows
	if(increment > 0){
		$('previous').setStyle('opacity', 1);
	} else {
		$('previous').setStyle('opacity', arrowOffOpacity);
	}
	if(increment == slidertotal){
		$('next').setStyle('opacity', arrowOffOpacity);
	} else {
		$('next').setStyle('opacity', 1);
	}
}


function toggle(newSrc) {
    //stop the current animation if it is running.
    if ($("div1").fx) {
        $("div1").fx.stop();
    }

    if ($("div2").fx) {
        $("div2").fx.stop();
    }

    //Decide which div to hide and which to show.
    if (visibleDiv == $("div1")) {

        //change the hidden image's source
        $("image2").src = newSrc;

        //fade the visible out and the hidden in.
        $("div1").fx = new Fx.Style($("div1"), 'opacity', {
            duration: fadeDuration
        }).start(0);

        $("div2").fx = new Fx.Style($("div2"), 'opacity', {
            duration: fadeDuration
        }).start(1);

        //Set which div is visible.
        visibleDiv = $("div2");

    } else {

        //change the hidden image's source
        $("image1").src = newSrc;

        //fade the visible out and the hidden in.
        $("div1").fx = new Fx.Style($("div1"), 'opacity', {
            duration: fadeDuration
        }).start(1);

        $("div2").fx = new Fx.Style($("div2"), 'opacity', {
            duration: fadeDuration
        }).start(0);

        //Set which div is visible
        visibleDiv = $("div1");

    }

}