/**
 * Custom button state handler for enabling/disabling button state. 
 * Called when the carousel has determined that the previous button
 * state should be changed.
 * Specified to the carousel as the configuration
 * parameter: prevButtonStateHandler
 **/
var handlePrevButtonState = function(type, args) {

    var enabling = args[0];
    var leftImage = args[1];
    if(enabling) {
        leftImage.src = "images/nav/carousel-left-off.gif";    
    } else {
        leftImage.src = "images/nav/carousel-left-disabled.gif";    
    }
    
};

/**
 * Custom button state handler for enabling/disabling button state. 
 * Called when the carousel has determined that the next button
 * state should be changed.
 * Specified to the carousel as the configuration
 * parameter: nextButtonStateHandler
 **/
var handleNextButtonState = function(type, args) {

    var enabling = args[0];
    var rightImage = args[1];
    
    if(enabling) {
        rightImage.src = "images/nav/carousel-right-off.gif";
    } else {
        rightImage.src = "images/nav/carousel-right-disabled.gif";
    }
    
};

/**
 * Swap the on/off images of the arrow img object
 * Note: If the arrow is disabled, nothing will happen
 */
function swaparrow(arrow) {
	if(arrow.src.indexOf("right-off") != -1) {
		arrow.src = "images/nav/carousel-right-on.gif";
	}
	else if(arrow.src.indexOf("left-off") != -1) {
		arrow.src = "images/nav/carousel-left-on.gif";
	}
	else if(arrow.src.indexOf("right-on") != -1) {
		arrow.src = "images/nav/carousel-right-off.gif";
	}
	else if(arrow.src.indexOf("left-on") != -1) {
		arrow.src = "images/nav/carousel-left-off.gif";
	}
}

function loadpic(newimg, imgwidth, imgheight) {
	// Dimensions of the image display container (matches #largepic in styles.css)
	var maxwidth = 362;
	var maxheight = 244;
	
	var oldPic = document.getElementById("portfolio_pic");
	var loadImage = true;
	if(oldPic != null) {
		if(oldPic.src.indexOf(newimg) != -1) {
//			alert("duplicate");
			loadImage = false;
		}
		else {
			// The oldPic is different to the new one, load it
			loadImage = true;
		}
	}
	else {
		// The is no oldPic, load the new one
		loadImage = true;
	}
	
	// Only load the image if it is not already being displayed
	if(loadImage) {
		// Get the image container div and create a new image object
		var imgdiv = document.getElementById("largepic")
		var img = new Image(imgwidth, imgheight);
		img.id = "portfolio_pic";
		img.src = newimg;
		img.alt = "Image Loading, Please Wait";
		
		// Determine how much the image would need to be reduced by to fit inside the container
		var widthReduction = imgwidth / maxwidth;
		var heightReduction = imgheight / maxheight;
		
		// Display the image at its original size by default
		var displaywidth = imgwidth;
		var displayheight = imgheight;
		var notice = "no reduction - ";
		
		// Determine if the image needs to be reduced in size
		if(widthReduction > 1 || heightReduction > 1) {
			var reductionDifference = widthReduction - heightReduction;
			if(reductionDifference < 0.01 && reductionDifference > -0.01) {
				// The difference in width/height reduction is tiny, resize the picture to fit the container perfectly.
				var displaywidth = maxwidth;
				var displayheight = maxheight;
				notice = "perfect fit : ";
			}
			else if(widthReduction < heightReduction) {
				// The height needs to be reduced more than width.
				var displaywidth = parseInt(imgwidth / heightReduction);
				var displayheight = maxheight;
				notice = "reduce height : ";
			}
			else {
				// The width needs to be reduced more than height.
				var displaywidth = maxwidth;
				var displayheight = parseInt(imgheight / widthReduction);
				
				notice = "reduce width : ";
			}
		}
		
		// Center the image vertically in the container
		if(displayheight < maxheight) {
			var topmargin = parseInt((maxheight-displayheight)/2);
			img.style.marginTop = topmargin + "px";
		}
		
		// Set the display width and height of the image
		img.width = displaywidth;
		img.height = displayheight;
		
		// Replace the image in the container
		imgdiv.innerHTML = "";
		imgdiv.appendChild(img);
		
		//alert(notice + displaywidth + "x" + displayheight);
	}
}