var curimage = 0;
var pagew = 0;
var pageh = 0;

function show() {
	fadein("darkbg", 100, 1000);
	fadein("slideshow", 100, 1000);

	curimage = 0;
	writenavbar();
	writeclosebutton();
	showimage();
	showdesc();
}

function showdesc() {
	if (typeof desc == "undefined") {
	}
	else {
		document.getElementById("descdiv").innerHTML = desc[curimage];
	}
}

function showimage() {
	
	/* show loading image here */
	var tmpimg = new Image();
	/* first code what we should do when the image loads */
	tmpimg.onload = function() {
	
		getPageSize();
		/*
		document.getElementById("slideshowimage_fader").src = imagearray[curimage].src;
		document.getElementById("slideshowimage_fader").style.position = "absolute";
		document.getElementById("slideshowimage_fader").style.zIndex = 40;
		document.getElementById("slideshowimage_fader").style.top = (pageh - this.height)/2 + "px";
		document.getElementById("slideshowimage_fader").style.left = (pagew - this.width)/2 + "px";
		document.getElementById("spacerw").style.width = (this.width + 50) + "px";
		document.getElementById("spacerh").style.height = (this.height + 50) + "px";
		fadein("slideshowimage_fader", 100, 1000);
		*/
		document.getElementById("blenddiv").style.width = this.width + "px";
		document.getElementById("blenddiv").style.height = this.height + "px";
		
		document.getElementById("blenddiv").style.backgroundImage = "url(" + document.getElementById("slideshowimage_fader").src + ")"; 
	    changeOpac(0, "slideshowimage_fader"); 
	    document.getElementById("slideshowimage_fader").src = imagearray[curimage].src; 
		document.getElementById("slideshowimage_fader").alt = imagecaptions[curimage]; 

	    //fade in image 
		var timer = 0;
		var speed = Math.round(1000 / 100); 
	    for(i = 0; i <= 100; i++) { 
	        setTimeout("changeOpac(" + i + ",\"slideshowimage_fader\")",(timer * speed)); 
	        timer++; 
	    } 
	}

	/* actual call to load image */
	tmpimg.src = imagearray[curimage].src;
	/* hide loading image here */

}


function getPageSize() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  pagew = myWidth;
  pageh = myHeight;
}

function hide() {	
	document.getElementById("darkbg").style.display = "none";
	document.getElementById("slideshow").style.display = "none";
}

function fadein(id, targetopac, millisec) {
	changeOpac(0, id);
	document.getElementById(id).style.display = "";
	opacity(id, 0, targetopac, millisec);
}

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

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

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 next() {
	if (curimage < imagearray.length - 1) {
		curimage++;
		writenavbar();
		writeclosebutton();
		showimage();
		showdesc();
	}
}

function prev() {
	if (curimage > 0) {
		curimage--;
		writenavbar();
		writeclosebutton();
		showimage();
		showdesc();
	}
}

function writeclosebutton() {
	btnhtml = '';
	if (curimage == imagearray.length - 1) {
		btnhtml += '<span class="closebutton_on">';
	}
	else {
		btnhtml += '<span class="closebutton">';
	}
	btnhtml += '<a href="#" onclick="javascript:hide(); return false;" alt="結束放映" title="結束放映">結束放映</a></span>';
	
	document.getElementById("closebutton").innerHTML = btnhtml;
}

function writenavbar() {
	
	navhtml = '';
	
	navhtml += '<table width="100%" cellspacing="0" cellpadding="0" border="0"><tr><td>';
	if (curimage == 0) {
		qpdisabled = 'navbutton_disabled';
	}
	else {
		qpdisabled = 'navbutton';
	}
	navhtml += '<div class="' + qpdisabled + '" id="prevbutton"><a href="#" onclick="javascript:prev(); return false;" title="上一張">&lt;&lt;</a></div>&nbsp;';
	
	//navhtml += '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
	navhtml += '</td><td align="center">';
	for (i = 0; i < imagearray.length; i++) {
		if (i == curimage) {
			qcur = 'navdisplay_highlight';
		}
		else {
			qcur = 'navdisplay';
		}
		navhtml += '<div class="' + qcur + '">' + (i+1) + '</div>&nbsp;';
		
		if (imagearray.length >= 15 && i != 0 && i%14 == 0) {
			navhtml += '<br/>';
		}
	}
	
	//navhtml += '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
	navhtml += '</td><td>';
	
	if (curimage == imagearray.length - 1) {
		qndisabled = 'navbutton_disabled';
	}
	else {
		qndisabled = 'navbutton';
	}
	navhtml += '<div class="' + qndisabled + '" id="nextbutton"><a href="#" onclick="javascript:next(); return false;" title="下一張">&gt;&gt;</a></div>&nbsp;';
	navhtml += '</td></tr></table>';
	
	document.getElementById("navbar").innerHTML = navhtml;
}