function imageStruct(imageId,filename,imageName,url,imageHeight,imageWidth,highlightDiv){
	this.imageId 	= imageId;
	this.imageName 	= imageName;
	this.filename 	= filename;
	this.url 		= url;
	this.width 		= imageWidth;
	this.height 	= imageHeight;
	this.highlightDiv= highlightDiv; 	
}

function ImageUpload(){
	var _self = this;
	var _imageLibDiv = document.getElementById("imageLibraryDiv");
	var _stockImageLibDiv = document.getElementById("stockImageLibDiv");
	var _imageLoaderDiv = document.getElementById("imageLibrary");
	var _images = new Object(); 
	_images["myImages"] = new Object();
	_images["stockImages"] = new Object();	
	var _currentImgId = null;
	var _imageSize = 100;
	var _imageOption = "image";
	var _imageUrls = new Object();
	var _projId = null;
	var _menuEditorInUse = false;	
	var _currentTab = "myImages"
	var _lastCategory = null;
	var _opened = false; //this is to get the categories only once, first time lib is opened
	var _displayOption=0;//for stock imgs, 0=no thum, 1 = thums, 2=bgimg
	var _tabFirstTime = true;
	//_imageUrls["1"] = "http://localhost:8085/images/";	
	_imageUrls["1"] = "http://doctopus-media.s3.amazonaws.com/images/";
	
	function init(){
		//preload the first category of stock images
		getStockImgCategories();		
	}
	this.displayLibrary = function(option){
		if(_currentTab=="myImages"){_self.refreshLibrary();}
		else showLibrary();
		if(!_opened){
			init();
			_opened=true;
		}
		_imageOption = option;
		_utilities.displayCover();
		if(_menuEditorInUse) _easyMenu.displayMenu("none");		
	}
	this.refreshLibrary = function(){
		if(_projId==null)_projId = _pageInfo['projId'];
		_ajax.ajaxCall_process("GetProjectImages",null,"projId="+_projId+"&projType="+_pageInfo['projType'],"_imageUploadManager.setImages")
		_utilities.centerObject(_imageLoaderDiv)	;
		 showLibrary();	
	}
	function showLibrary(){	_imageLoaderDiv.style.display = "block";}
	this.setMenuEditor = function(option){
		_menuEditorInUse = option;
		_bgImgManager.setMenuEditor(option);
	}
	this.setImage = function(){
		if(_currentImgId == null)alert("Please select an image by clicking on it.");
		else{
			if(_imageOption == "image") checkImageFit();
			else setBGImage();
		}		
	}
	
	this.setImages = function(images){
		//alert(images)
		var imageStr = images.substring(0,images.indexOf(";"))		
		images = images.substring(images.indexOf(";")+1)
		
		while(imageStr !=""){
			var noImg = document.getElementById("imgLib_noImagesTable");
			if(noImg!=undefined) noImg.style.display="none";
			var imageProperties = imageStr.split("|");
			var imageId   = imageProperties[0];
			var filename  = imageProperties[1];
			var imageName = imageProperties[2];
			var url  	  = imageProperties[3];
			var height 	  = imageProperties[4];
			var width	  = imageProperties[5];
			
			if(_images[_currentTab][imageId] == undefined){
				addImage(imageId,filename,imageName,url,height,width);
			}	
			imageStr = images.substring(0,images.indexOf(";"))
			images = images.substring(images.indexOf(";")+1)			
		}
	}
	function addImage(mageId,filename,imageName,url,height,width){
		var img = createImage(mageId,filename,imageName,url,height,width);		
		if(_currentTab == "myImages"){_imageLibDiv.appendChild(img);}
		else{_stockImageLibDiv.appendChild(img);}
		
	}	
	function createImage(imageId,filename,imageName,url,height,width){
		if(_images[_currentTab][imageId] == undefined){
			var imageHighlightDiv = document.createElement('div');
			imageHighlightDiv.id = imageId;
			_pm.setStyle(imageHighlightDiv,"position:relative;float:left;cursor:pointer; background:white;width:"+(_imageSize + 10)+";height:"+(_imageSize + 10)+";");
			imageHighlightDiv.onmouseover = highlightParent;
			imageHighlightDiv.onmouseout = unHighlightParent;
			imageHighlightDiv.onclick = selectImage;
			imageHighlightDiv.title = imageName + " - " +width+" x " +height;			
			
			var thumbLocation = "";
			if(_imageUrls[url] != undefined) {
				if(_currentTab=="myImages")thumbLocation = _imageUrls[url] + "thumb/" + filename;
				else{ 
					if(_displayOption==1)thumbLocation = _imageUrls[url] + "thumb/" + filename;
					else thumbLocation = _imageUrls[url] + "full/" + filename;
				}
			}
			else thumbLocation = url;
			var img = '<img src = "'+thumbLocation+'"/>';
			if(_displayOption==2) img = '<div style="position:relative;width:90;height:90; background-image:url('+thumbLocation+')"></div>';
			var table = '<table width="100%" height="100%"><tr><td valign="middle" align="center">'+img+'</td></tr></table>';
			imageHighlightDiv.innerHTML = table;			
			_images[_currentTab][imageId] = new imageStruct(imageId,filename,imageName,url,height,width,imageHighlightDiv);
			return imageHighlightDiv;
		}
	}
	this.uploadStockImg = function(){
		var cat = prompt("category?");
		var thumb ="0"; //no thumb
		if(confirm("create thumbnail?"))thumb = "1";		
		if(cat!=""){	loadPrompt("/work/utils/fileUpload/stockImageUpload.html?categoryID="+cat+"&thumb="+thumb);}
		else alert("Need category!");
	}
	this.uploadNewImage = function(){
		if(main_checkFlash()){
			_imageLoaderDiv.style.display = 'none';
			loadPrompt("/work/utils/fileUpload/imageUpload.html?userID="+ _pageInfo['userID']+"&projId="+_pageInfo['projId']+"&projType=1");
		}else{			
			document.getElementById("imgUpload_IFrameDiv").style.display = "block";
		}
	}
	this.closeUploadImage = function(){
		document.getElementById("imgUpload_IFrameDiv").style.display = "none";
		var iFrame = document.getElementById("imgUpload_IFrame");
		if(iFrame != null)
			iFrame.src ="work/WebsiteEditor/HTML/uploadImage.html"
	}
	this.closeImageLibrary = function(){
		document.getElementById('imageLibrary').style.display = 'none';
		_self.closeUploadImage();
		_utilities.hideCover();
		if(_menuEditorInUse) _easyMenu.displayMenu("block");
	}
	this.imageUploaded = function(){		
		_self.closeImageLibrary();
		_self.displayLibrary(_imageOption);		
	}
	this.imageUploaded_flashGUI = function(){
		if(_pageInfo["projId"] == _projId) _self.refreshLibrary();
		else _self.getImagesFromSite(_pageInfo["projId"]);
	}
	
	function highlightParent(){
		this.style.background = "#d2ff76";
	}
	
	function unHighlightParent(){
		this.style.background = "white";
	}
	
	this.deleteImage =function(){
		if(_currentImgId == null)alert("Please select an image by clicking on it.");
		else{
			var deleteImage = confirm("Do you want to delete this image?");
			if(deleteImage)
				_ajax.ajaxCall_process("DeleteProjectImage",null,"projId="+_pageInfo['projId']+"&projType="+_pageInfo['projType']+"&imageId=" + _currentImgId,"_imageUploadManager.processDeleteImage")
		}
	}
	this.processDeleteImage = function(responseText){
		if(responseText == "-1"){
			alert("There was a problem deleting the image. Please try again.");
		}else{
			_images[_currentTab][_currentImgId].highlightDiv.parentNode.removeChild(_images[_currentTab][_currentImgId].highlightDiv);
			delete _images[_currentTab][_currentImgId];
			_currentImgId = null;
		}
	}
	
	function resetImgHighlight(imgId){
		if(imgId!=null && imgId!=undefined){
			_images[_currentTab][imgId].highlightDiv.style.background = "white"
			_images[_currentTab][imgId].highlightDiv.onmouseover = highlightParent;
			_images[_currentTab][imgId].highlightDiv.onmouseout = unHighlightParent;
		}
	}
	function selectImage(){		
		if(_currentImgId != null){resetImgHighlight(_currentImgId)}
		_currentImgId = this.id;
		_images[_currentTab][_currentImgId].highlightDiv.style.background = "#81cd00";
		_images[_currentTab][_currentImgId].highlightDiv.onmouseover = null;
		_images[_currentTab][_currentImgId].highlightDiv.onmouseout = null;
	}
	
	function checkImageFit(){
		var imageWidth = parseInt(_images[_currentTab][_currentImgId].width);
		var pageWidth = parseInt(_elementsManager.getElementFromElementsTable("mainPage").properties['width']); 
		
		if(imageWidth >= pageWidth )	{
		 	var imageSizeSelect = document.getElementById("imageSize_select");
		 	imageSizeSelect.style.display = "block";
		 	_utilities.centerObject(imageSizeSelect);
		 	document.getElementById('imageLibrary').style.display = 'none';			
		}
		else
			_self.setImageSize('asis');
	}
	
	
	this.setImageSize = function(imageSize){
		var imageName   = _currentImgId;//.substring(0,_currentImgId.indexOf("."))
		var pageWidth   = parseInt(_elementsManager.getElementFromElementsTable("mainPage").properties['width']); 
		var imageWidth  = parseInt(_images[_currentTab][_currentImgId].width);
		var imageHeight = parseInt(_images[_currentTab][_currentImgId].height);
		
		var imagePath = "";
		if(_imageUrls[_images[_currentTab][_currentImgId].url] != undefined) imagePath = _imageUrls[_images[_currentTab][_currentImgId].url] + "full/" + _images[_currentTab][_currentImgId].filename;
		else imagePath = _imageUrls[_images[_currentTab][_currentImgId].url];
		
		document.getElementById("imageSize_select").style.display = "none";
		document.getElementById('imageLibrary').style.display = 'none';
		_utilities.hideCover();
		
		// resize if bigger than page itself.
		if(imageSize != "asis"){
			var resizeFactor = imageWidth / (pageWidth * parseFloat(imageSize));	
			imageHeight = imageHeight / resizeFactor;
			imageWidth  = imageWidth / resizeFactor;			
		}		
		_elementsManager.setImage(imagePath, _images[_currentTab][_currentImgId].imageName, imageHeight,imageWidth,_images[_currentTab][_currentImgId].height,_images[_currentTab][_currentImgId].width);
	}
	this.editImage_basic = function(imgId,imgName,imgSrc){
		alert(imgSrc)
		var editPicForm = document.createElement("form");
		document.body.appendChild(editPicForm);
		var newElement = document.createElement("input");
		newElement.name = "snipshot_input";
		newElement.value = imgSrc;
		editPicForm.appendChild(newElement);
		editPicForm.method = "POST";
		editPicForm.target= "EditImage";
		editPicForm.action= "http://services.snipshot.com/";
		editPicForm.encoding = "multipart/form-data";
		editPicForm.submit();	
	}
	
	function setBGImage(){		
		var imagePath = "";
		if(_imageUrls[_images[_currentTab][_currentImgId].url] != undefined) imagePath = _imageUrls[_images[_currentTab][_currentImgId].url] + "full/" + _images[_currentTab][_currentImgId].filename;
		else imagePath = _imageUrls[_images[_currentTab][_currentImgId].url];		
		_bgImgManager.setConsoleBgImg(imagePath);
		_bgImgManager.setElementBGImage();
		_self.closeImageLibrary();
	}
	this.changeWebsite = function(){		
		_ajax.ajaxCall_process("GetWebsiteNames","","projId="+_pageInfo['projId']+"&projType="+_pageInfo['projType'],"_imageUploadManager.changeWebsite_response")		
	}
	this.changeWebsite_response = function(responseText){
		//alert(responseText);
		responseText = responseText.substring(0, responseText.lastIndexOf("|"));
		var siteNames = responseText.split("|");
		var sitesHTML = '<span style="font-size:9pt; font-family:Trebuchet MS;color:#0e4300;">website: </span><select id="website_images_select" onchange="_imageUploadManager.getImagesFromSite(this.value)" style="width:150px;">'
		for(i=0; i<siteNames.length; i+=2){
			var selected = "";
			if(siteNames[i]==_projId) selected = 'selected="yes"';
			sitesHTML+="<option "+selected+" value="+siteNames[i]+">"+siteNames[i+1]+"</option>"
		}
		sitesHTML += "</select>"
		var div = document.getElementById("images_change_website_div");
		div.innerHTML = sitesHTML;
	}
	this.getImagesFromSite = function(siteId){
		if(siteId != _projId){
			_projId = siteId;
			var select = document.getElementById("website_images_select");
			if(select!=undefined) select.value = _projId;
			_imageLibDiv.innerHTML = "";
			deleteImagesObject();
			_self.refreshLibrary();
		}		
	}
	function deleteImagesObject(){
		delete _images[_currentTab];
		_images[_currentTab] = new Object();
		_currentImgId = null;
	}
	this.selectTab = function(option){
		if(option!=_currentTab){			
			document.getElementById(_currentTab+"_tab").className = "unselectedTab";
			document.getElementById(option+"_tab").className = "selectedTab";
			document.getElementById(option+"_holder_div").style.display = "block";
			document.getElementById(_currentTab+"_holder_div").style.display = "none";			
			resetImgHighlight(_currentImgId);
			_currentTab = option;
			if(option=="stockImages" && _tabFirstTime){_tabFirstTime=false;_self.selectCategory("1","0");}	
			_currentImgId = null;	
			hideLibraryButtons();							
		}
	}
	function hideLibraryButtons(){
		if(_currentTab=="myImages"){
			document.getElementById("imgLibDeleteButton").style.visibility="visible";
			document.getElementById("imgLibUploadButton").style.visibility="visible";
		}else{
			document.getElementById("imgLibDeleteButton").style.visibility="hidden";
			document.getElementById("imgLibUploadButton").style.visibility="hidden";
		}
	}	
	function getStockImgCategories(){
		_ajax.ajaxCall_process("GetStockImgCategories",null,"","_imageUploadManager.displayCategories")
	}
	this.displayCategories = function(list){
		var div = document.getElementById("img_categories_holder");
		var html = "";
		var categories = list.split("|");
		for (i=0; i<categories.length; i+=3){
			if(categories[i+1] !=undefined) html+='<div id="cat_div_'+categories[i]+'" class="listUnselected" style="margin:4px;" onclick="_imageUploadManager.selectCategory('+categories[i]+','+categories[i+2]+')">'+categories[i+1]+"</div>";
		}
		div.innerHTML=html;
	}
	this.selectCategory = function(catID, displayOption){
		if(_lastCategory!=catID){
			_displayOption = displayOption;
			deleteImagesObject();
			if(_lastCategory!=null)document.getElementById("cat_div_"+_lastCategory).style.textDecoration= "";
			document.getElementById("cat_div_"+catID).style.textDecoration = "underline";
			_lastCategory = catID;
			_stockImageLibDiv.innerHTML="";
			_self.getCategoryImages(catID);
		}
	}
	this.getCategoryImages = function(catId){
		_ajax.ajaxCall_process("GetStockImages",null,"category="+catId,"_imageUploadManager.setImages")
	}
}
 
 /*
  * BG IMAGE MANAGER
  */
 function BgImgManager(){
 	var _self = this;
 	var _selectedImagePath = "";
 	var _menuEditorInUse = false
 	
	this.displayBgImageMenu = function(bgImgSelection)	{getCurrentValues();}//does this still exists?
 	this.setMenuEditor = function(option){_menuEditorInUse=option;}
 	this.setCurrentValues = function(bgImg,bgRepeat){ 		
 		if(bgImg == undefined || bgImg == '') _self.clearBGImg();
 		else _self.setConsoleBgImg(bgImg);
 		
 		var repeatY = document.getElementById('bgImgRepeatY');
		var repeatX	= document.getElementById('bgImgRepeatX');
		var repeatN	= document.getElementById('bgImgRepeatN');
		
		repeatY.checked = null;
		repeatX.checked = null;
		repeatN.checked = null;
		
		if(bgRepeat == 'no-repeat') repeatN.checked = true;
		else if(bgRepeat == 'repeat-y')repeatY.checked = true;
		else if(bgRepeat == 'repeat-x')repeatX.checked = true;
		else {repeatY.checked = true; repeatX.checked = true;}
 	}
 	
 	this.clearBGImg = function(){
 		var bgImg = document.getElementById("bgImageHolderDiv");
		bgImg.innerHTML = '<table height="100%"><tr><td valign="middle">No Image Selected</td></tr></table>';
		bgImg.style.backgroundImage = "";
 	}
 	
 	this.setConsoleBgImg = function(imagePath){
 		var bgImg = document.getElementById("bgImageHolderDiv");
		bgImg.innerHTML = "";
		bgImg.style.backgroundImage = "url("+ imagePath +")";	
		_selectedImagePath = imagePath;
 	}
 	
 	this.setElementBGImage = function(){
 		if(_menuEditorInUse) _easyMenu.setBgImage(_selectedImagePath, determineRepeat());
 		else _elementsManager.setBgImage(_selectedImagePath, determineRepeat());
 	}
	this.removeBgImg = function(){
		if(_menuEditorInUse) _easyMenu.removeBgImg();
		else _elementsManager.removeBgImg();
	}
	function determineRepeat(){
		var repeat = "no-repeat";
		var repeatY = document.getElementById('bgImgRepeatY').checked;
		var repeatX	= document.getElementById('bgImgRepeatX').checked;
		
		if(repeatY && repeatX) repeat = "repeat";
		else if(repeatX) repeat = "repeat-x";
		else if(repeatY) repeat = "repeat-y";
	
		return repeat;
	}	
	
	this.uncheckRepeat = function(value){
		if(value == true)	{
			document.getElementById('bgImgRepeatY').checked = null;
			document.getElementById('bgImgRepeatX').checked = null;
		}	
	}
	this.uncheckNoRepeat = function(value){	if(value == true)	document.getElementById('bgImgRepeatN').checked = null;}	
 }