//This script controls most of my functionality when on mobile device

var spanishSet = true;			//spcify to start in spanish mode

var number_of_headshots = 2;	//number ot total images
var image_count = 1;			//my counter to keep of images

//functionality to change language
function languageSwap(deviceUsed,pageLocation){
	//alert("language swap");
	spanishSet = !spanishSet;
	
	if(!spanishSet){
		
		document.getElementById('language_button').src="images/english_button.png";
		document.getElementById('image_text').innerHTML="Select image to view next.";
	}
	else if(spanishSet){
		
		document.getElementById('language_button').src="images/spanish_button.png";
		document.getElementById('image_text').innerHTML="Seleccione la imagen para ver la siguiente.";
	}
}

//this function changes the html content
function changePhotoContent(photo_album,imageSize){
	
	//alert(photo_album);
	document.getElementById('photo_content').style.visibility = 'hidden';		//hide content that's being loaded
	document.getElementById('loading_content').style.visibility = 'visible';	//show loading process bar/text
	
	var count_tracker = 0;		//this was use when multiple photo albums
	
	//get photo_album specify
	switch(photo_album){
		case 'headshots':
			count_tracker = number_of_headshots;
			break;
	}
	
	//reset counter to show images from the first one after last
	if(image_count != count_tracker){
		image_count++;
	}
	else{
		image_count = 1;
	}
	
	//alert(image_count);
	//replaces the inner HTML code inside the a link "image_button"
	//this is done because of different size images, if not, the next image will be set to the previous ones width and height
	document.getElementById('image_button').innerHTML = '<img border=\"1\" name=\"myImage\" id=\"image_content\" align=\"center\" style=\"border-color:#FFF;\" src=\"images/' + photo_album + '_image_' + image_count + '.png\" alt=\"\" title=\"\"/>';
	
	//start a timer to figure out when new image has been loaded
	setTimeout('doWhileLoading(imageSize)', 100 ) ;
}

function doWhileLoading(imageSize){
	//find out if image is done loading
	if(document.getElementById('image_content').complete){
		//alert("done");
		
		//the following code is for layout, I need to know if it is lanscape or portrait to specify dimensions and spacing
		//all depeding on what type of device as well
		if(document.getElementById('image_content').width > document.getElementById('image_content').height){
			//alert('width is greater than space');
			if(imageSize < document.getElementById('image_content').width){
				document.getElementById('image_content').width = imageSize;
			}
		}
		else{
			//alert('width is greater than space');
			if(imageSize < document.getElementById('image_content').height){
				document.getElementById('image_content').height = imageSize;
			}
		}
		
		if(imageSize > document.getElementById('image_content').height){
			//adjust space above and below image
			//decided not to use it
			//document.getElementById('image_content').style.marginTop = ((imageSize - document.getElementById('image_content').height) / 2) - 10;
			//document.getElementById('image_text').style.marginBottom = ((imageSize - document.getElementById('image_content').height) / 2) - 10;
		}
		
		//make image visible again and hide loading text/bar
		document.getElementById('photo_content').style.visibility = 'visible';
		document.getElementById('loading_content').style.visibility = 'hidden';
	}
	else{
		//if image is not loaded, start timer again
		setTimeout('doWhileLoading(imageSize)', 100 ) ;
	}
}