/*
	REC TEC LIVE, Inc.
	
	designer: Nathan Edwards
	type: Javascript
	file: dialogue.js
	purpose: Controls all AJAX dialogues
*/


/*
	REC TEC YELLOW: #f5c123
*/



/////////////////////////////////////////
//---------- GLOBAL VARABLES ----------//
/////////////////////////////////////////

var curImageNum = -1;
var numOfImages = -1;
var curImage = new Image();
var closeImage = new Image();
var tagBoxImage = new Image();
var loadingImage = new Image();
closeImage.src = URL + "imgs/close.png";
tagBoxImage.src = URL + "imgs/tagBox.png";
loadingImage.src = URL + "imgs/loading.gif";

var imageArray = new Array();
var captionArray = new Array();
var tagArray = new Array();

var mapHalfSize = 35;

var galleryName = '';
var galleryLoc = '';

var imgLarge = false;
var newWidth = 0;
var newHeight = 0;

var imageLarger = new Object();

/////////////////////////////////////////
//------- LARGE IMAGE FUNCTIONS -------//
/////////////////////////////////////////



//---------------|PRELOAD THE GALLERY
function preLoadGallery(galleryId)
{
	try {xmlhttp = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");}
	catch (e) { /* catch errors-->do nothing */ }
	xmlhttp.onreadystatechange = galleryReturn;
	xmlhttp.open("POST", URL + 'ajax/galleryPreload.php?galleryId=' + galleryId);
	xmlhttp.send(null);
}



//---------------|GALLERY RETURN - ALL IMAGES TO PRELOAD
function galleryReturn() {
  	if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)){
		var response = xmlhttp.responseText.split("<~RTL~>");	//gallery name, gallery location, gallery images
		galleryName = response[0];
		galleryLoc = response[1];
		
		//Loop through images
		numOfImages = response.length - 2;
		for(var j=0; j<numOfImages; j++)
		{
			var mySplitImage = response[j+2].split("<!RTL!>");	//image source, image caption, image tags
			imageArray[j] = new Image();
			imageArray[j].src = galleryLoc + mySplitImage[0] + '.jpg';
			captionArray[j] = mySplitImage[1];

			//Loop through tags
			var numOfTags = mySplitImage.length - 2;
			tagArray[j] = new Array();
			for(var k=0; k<numOfTags; k++)
			{
				tagArray[j][k] = mySplitImage[k+2];
			}
		}
		if(curImageNum != -1)
		{
			//imgLarge = true;
			imageShow(document.getElementById("img" + curImageNum), curImageNum);
		}
  	}
}



//---------------|SHOW IMAGE
function imageShow(imageLoc, imageNum) {
	imageLarger = document.getElementById("imageLarge");
	curImageNum = imageNum;
	curImage.src = '';
	curImage.src = imageArray[curImageNum].src;
	hideTagPin();
	
	if(!curImage.complete){
		changeOpac(.85, "imageLarge");
		if(imgLarge == false)
		{
			changeOpac(.75, "imageLarge");
			if(findIE6 != -1 || findIE7 != -1)	//if ie6 or ie7
			{
				imageLarger.style.width = imageLoc.width - 4 + 'px';
				imageLarger.style.height = imageLoc.height - 4 + 'px';
			}else
			{
				imageLarger.style.width = imageLoc.width + 6 + 'px';
				imageLarger.style.height = imageLoc.height + 6 + 'px';
			}
			if(findSafari != -1)	//if safari
			{
				imageLarger.style.top = elementY(imageLoc) + 'px';
				imageLarger.style.left = elementX(imageLoc) + 'px';
			}else
			{
				imageLarger.style.top = elementY(imageLoc) + 2 + 'px';
				imageLarger.style.left = elementX(imageLoc) + 2 + 'px';
			}
			imageLarger.style.borderWidth = "1px";
			imageLarger.innerHTML = '<table width="100%" height="100%"><tr><td><img src="' + loadingImage.src + '" /></td></tr></table>';
		}else
		{
			imageLarger.innerHTML = '<div id="close" onClick="closeLargeImage()"></div>';
			imageLarger.innerHTML += '<span class="galleryName">' + galleryName + '</span>';
			imageLarger.innerHTML += '<table width="' + newWidth + 'px" height="' + (newHeight-100) + 'px"><tr><td><img src="' + loadingImage.src + '" /></td></tr></table>';
			imageLarger.innerHTML += '<span class="galleryInstuctions">LEFT and RIGHT keys to navigate and ESC to close.</span>';	
		}
	}
	
	imageLarger.style.visibility = 'visible';
}



//---------------|SHOW IMAGE ONLY ONCE IT'S FULLY DOWNLOADED
curImage.onload = function()
{
	//timer = setInterval("makeLarge()",5);
	makeLarge();
}



//---------------|CHANGE IMAGE LOCATION AND SIZE
function makeLarge()
{
	
	fromTop = 50;
	newWidth = parseInt(curImage.width);
	newHeight = parseInt(curImage.height);
	if(parseInt(curImage.width) > parseInt(curImage.height) && parseInt(curImage.width) > 600)
	{
		newWidth = 600;
		newHeight = newWidth *  parseInt(curImage.height) /  parseInt(curImage.width);
	}else if(parseInt(curImage.height) > 550)
	{
		newHeight = 550;
		newWidth = newHeight * parseInt(curImage.width) / parseInt(curImage.height);
	}else
	{
		newWidth = parseInt(curImage.width);
		newHeight = parseInt(curImage.height);	
	}
	
	changeOpac(1, "imageLarge");
	imageLarger.style.left = document.body.clientWidth/2 - parseInt(curImage.width)/2 + "px";
	if(findSafari != -1)	//if safari and iPhone
	{
		imageLarger.style.top = document.body.scrollTop + fromTop + "px";
	}else
	{
		imageLarger.style.top = document.documentElement.scrollTop + fromTop + "px";
	}
		
	imageLarger.style.width = newWidth + "px";
	imageLarger.style.height = newHeight + 20 + "px";
	newWidth = newWidth - 4;	//minus 4 for padding
	newHeight = newHeight - 4;
	
	//IMAGE
	imageLarger.innerHTML = '<div id="close" onClick="closeLargeImage()"></div>';
	imageLarger.innerHTML += '<span class="galleryName">' + galleryName + '</span>';
	imageLarger.innerHTML += '<img id="largeImage" onClick="imageShow(\'\', ' + (curImageNum >= (numOfImages-1) ? 0 : (curImageNum+1)) + ')" class="largeImage" width="' + newWidth + 'px" height="' + newHeight + 'px" src="' + curImage.src + '" usemap="#map_' + curImageNum + '" />';

	//CAPTION
	if(captionArray[curImageNum] != '')
		imageLarger.innerHTML += '<span class="galleryCaptionBg">' + captionArray[curImageNum] + '</span><span class="galleryCaptionTxt" id="galleryCaption">' + captionArray[curImageNum] + '</span>';
		//the galleryCaptionBg is lower opacity but still needs the text to size the div, while the galleryCaptionTxt contains the text as well, but full opacity
	
	//INSTRUCTIONS
	imageLarger.innerHTML += '<span class="galleryInstuctions">LEFT and RIGHT keys to navigate and ESC to close.</span>';
	
	//TAGS
	var mapText = '';
	var tagText = '';
	if(tagArray[curImageNum].length > 0)
	{
		for(var m=0; m<tagArray[curImageNum].length; m++)
		{
			var mySplitTag = tagArray[curImageNum][m].split("<@RTL@>");	//tag x, tag y, tag text
			var coords =	Math.round(mySplitTag[0]*newWidth-mapHalfSize) + ',' + 
							Math.round(mySplitTag[1]*newHeight-mapHalfSize) + ',' + 
							Math.round(mySplitTag[0]*newWidth+mapHalfSize) + ',' + 
							Math.round(mySplitTag[1]*newHeight+mapHalfSize);
							
			mapText +=  '<area shape="rect" coords="' + coords + '" onMouseOver="showTagPin(' + mySplitTag[0] + ',' + mySplitTag[1] + ', ' + m + ')" />';	//the hideTag() is called onMouseOut of tagBox since it takes focus on the mouse, if not...glitchy
			tagText += '<span class="tagText" id="tagtext_' + m + '" onMouseOut="hideTagPin()" onMouseOver="showTagPin(' + mySplitTag[0] + ',' + mySplitTag[1] + ', ' + m + ')"> ' + mySplitTag[2] + ' </span> | ';
		}
		imageLarger.innerHTML += '<span class="galleryTags"><h2>Tags: | </h2>' + tagText + '</span>';
		imageLarger.innerHTML += '<map id ="map_' + curImageNum + '" name ="map_' + curImageNum + '" >' + mapText + '</map>';
	}
	
	
	imgLarge = true;	
}




//---------------|RESET SOME VARIABLES AND STUFF WHEN THE LARGE IMAGE IS CLOSED
function closeLargeImage()
{
	
	hideTagPin();
	divToggle('imageLarge');
	imageLarger.innerHTML = '';
	imgLarge = false;
}





/////////////////////////////////////////
//----------- KEYPRESS STUFF ----------//
/////////////////////////////////////////


//---------------|HANDLING THE KEYDOWN AND KEYPRESS FOR SWITCHING IMAGES
document.onkeydown = function(e) {
	var evt = (e) ? e : window.event;
	if(evt.type == 'keydown')
	{
		var char = evt.keyCode;	
		if (char == 37) 	//previous image (left)
		{    
			var prevImageNum = 0;
			(curImageNum <= 0 ? prevImageNum = (numOfImages-1) : prevImageNum = (curImageNum-1));
			div = document.getElementById("img"+prevImageNum);
			imageShow(div, prevImageNum);
		}else if(char == 39)	//next image (right)
		{
			var nextImageNum = 0;
			(curImageNum >= (numOfImages-1) || curImageNum < 0 ? nextImageNum = 0 : nextImageNum = (curImageNum+1));
			div = document.getElementById("img"+nextImageNum);
			imageShow(div, nextImageNum);
		}else if(char == 27)	//close image (esc)
		{
			closeLargeImage();
		}
	}
}



/////////////////////////////////////////
//----------- IMAGE TAGGING -----------//
/////////////////////////////////////////


//---------------|HANDLING THE TAGGING OF PHOTOS
function tagImage(evt,divId, imageId)
{	
	//A RANDOM OFFSET THAT MIGHT HAVE TO BE SET IF NUMBERS DON'T TURN OUT EXACT, JUST TEST A FEW AND USE MATH TO ADJUST ;-)
	var randOffset = 2;

	//STUPID IE WITH THE BORDER/PADDING ON THE INSIDE
	if(findIE6 > 0 || findIE7 > 0)
		var borderOffset = parseInt(getStyle(divId, 'borderLeftWidth', 'border-left-width')) + parseInt(getStyle(divId, 'paddingLeft', 'padding-left'));
	else
		var borderOffset = 0;

	var optionWidth = 175;
	
	var x = Math.round((mouseLocX(evt) - elementX(divId) - borderOffset - randOffset) / (divId.width) * 10000)/10000;
	var y = Math.round((mouseLocY(evt) - elementY(divId) - borderOffset - randOffset) / (divId.height) * 10000)/10000;

	var tagOption = document.getElementById("tagOptions").style;
	tagOption.top = (elementY(divId) + divId.height + borderOffset) + 'px';
	tagOption.left = (elementX(divId) - optionWidth / 2 + borderOffset / 2 + divId.width / 2) + 'px';
	ajaxMe('photoTagOptions.php?imageId=' + imageId + '&x=' + x + '&y=' + y + '&');
}


//---------------|SEND INFORMATION TO AJAX TO ADD TAG AND CLOSE THE DIV
function addTag(imageId, x, y, text)
{
	ajaxMe('photoTagAdd.php?imageId=' + imageId + '&x=' + x + '&y=' + y + '&text=' + text); 
	divClose('tagOptions');
}

//---------------|SEND INFORMATION TO AJAX TO REMOVE TAG
function removeTag(imageId, tagId)
{
	ajaxMe('photoTagRemove.php?imageId=' + imageId + '&tagId=' + tagId);
}


//---------------|SHOW THE PIN ON THE LOCATION
var activeTag = 0;
function showTagPin(x, y, tagText)
{
	activeTag = tagText;
	var img = document.getElementById("largeImage");
	var tagPointer = document.getElementById("tagBox");
	
	if(findIE6 > 0 || findIE7 > 0)
		var borderOffset = parseInt(getStyle(img, 'borderLeftWidth', 'border-left-width')) + parseInt(getStyle(img, 'paddingLeft', 'padding-left'));
	else
		var borderOffset = 0;
	
	tagPointer.style.top = (elementY(img) + (img.height * y) - parseInt(getStyle(tagPointer, 'height', 'height')) / 2 + borderOffset) + 'px';
	tagPointer.style.left = (elementX(img) + (img.width * x) - parseInt(getStyle(tagPointer, 'width', 'width')) / 2 + borderOffset) + 'px';
	tagPointer.style.visibility = "visible";
	
	document.getElementById("tagtext_" + activeTag).style.color = "#f5c123";	
}


//---------------|HIDE THE PIN
function hideTagPin()
{
	document.getElementById("tagBox").style.visibility = 'hidden';
	
	if (document.getElementById("tagtext_" + activeTag) != null )
		document.getElementById("tagtext_" + activeTag).style.color = "#fff";	
}





/////////////////////////////////////////
//--------- FLASH MOVIE STUFF ---------//
/////////////////////////////////////////


//---------------|FIND THE MOVIE OBJECT
function getFlashMovie(movieName)
{
	var isIE = navigator.appName.indexOf("Microsoft") != -1;
	return (isIE) ? window[movieName] : document[movieName];
}


//---------------|START PLAYING THE VIDEO
function playVideo(videoId, name, extension, description)
{
	getFlashMovie("myMovie").playFile(videoId, name, extension, description);
	window.scroll(0,300);
	ajaxMe('videoViews.php?videoId=' + videoId);
}


//---------------|CHANGE THE ORDER OF THE VIDEOS
function reOrder()
{
	order = document.list.order.value;
	link(URL + 'videoGallery.php?order=' + order);
}