var imgselector = Class.create();

imgselector.prototype = {
	
	/*	initialize: @lgfile - the list generator file to feed the div
					@imgName - name of the image that is to be altered
					@blanker - The name of the blanking image file for clearing
	*/
	initialize: function(iSpanName_, lgfile_, blanker_, upfile_)
	{
		/* Set the params in this object */
		this.lgfile = lgfile_;
		this.iSpanName = iSpanName_;
		this.blanker = blanker_;
		this.iSpanElem = $(this.iSpanName);
		this.actImg = this.iSpanElem.childNodes[0];
		this.actImg.title="Click to Select Image";
		if(this.actImg.src.substring(this.actImg.src.length-16) == "IMGMISSING_EMPTY") this.actImg.src=this.blanker;
		this.oldSrc = this.actImg.src;
		this.upfile = upfile_;
		
		/* Set up the primary click */
		var elf = this;
		this.actImg.onclick = function()
		{
			elf.buildISelector();
			elf.loadLGfile();
			elf.activateBigDiv();
			elf.activateButtonPanel();
			elf.actImg.title = "";
			elf.actImg.onclick = function(){}
		}
	},
	
	/* buildISelector: Creates all elements of the new iselector
	*/
	buildISelector: function()
	{
		/*Build the windowing div*/
		this.bigDiv = document.createElement("div");
		document.body.appendChild(this.bigDiv);
		this.bigDiv.zIndex="999999";
		this.bigDiv.style.textAlign = "left";
		this.bigDiv.style.position = "absolute";
		this.bigDiv.style.borderStyle="groove";
		this.bigDiv.style.borderWidth="5px";
		this.bigDiv.style.height="457px";
		this.bigDiv.style.width="350px";
		this.bigDiv.style.overflow="scroll";
		var up_one = this.actImg;
		this.bigDiv.style.left = this.actImg.offsetLeft + this.actImg.offsetWidth;		
		while(up_one.offsetParent)
		{
		    up_one = up_one.offsetParent;
		       this.bigDiv.style.left = this.bigDiv.offsetLeft + up_one.offsetLeft; 
      }
      var up_one = this.actImg;
		this.bigDiv.style.top = this.actImg.offsetTop;		
		while(up_one.offsetParent)
		{
		    up_one = up_one.offsetParent;
		       this.bigDiv.style.top = this.bigDiv.offsetTop + up_one.offsetTop;
      }
		this.bigDiv.style.backgroundColor = "whitesmoke";
		this.bigDiv.style.border
		this.bigDiv.innerHTML = "<h4 style='color: black'>Loading...</h4>";
		
		/*Build the button pannel*/
		this.buttPanel = document.createElement("div");
		document.body.appendChild(this.buttPanel);
		this.buttPanel.zIndex = "999999";
		
		/*Build the cancel button*/
		this.cancelButton = document.createElement("button");
		this.buttPanel.appendChild(this.cancelButton);
		this.cancelButton.id = "cancelbutton";
		this.cancelButton.innerHTML = "<h4 style='color: black;'>Cancel</h4>";
		
		/*Build the submit button*/
		this.submitButton = document.createElement("button");
		this.buttPanel.appendChild(this.submitButton);
		this.submitButton.id = "submitbutton";
		this.submitButton.innerHTML = "<h4 style='color: green;'>Submit</h4>";
		
		/*Build the Clear button*/
		this.ClearButton = document.createElement("button");
		this.buttPanel.appendChild(this.ClearButton);
		this.ClearButton.id = "clearbutton";
		this.ClearButton.innerHTML = "<h4 style='color: red;'>Clear</h4>";

		/*Adjust the button panel*/
		this.buttPanel.style.width =	this.cancelButton.offsetWidth
										+ this.submitButton.offsetWidth
										+ this.ClearButton.offsetWidth
										+ 5
										+ "px";
		this.buttPanel.style.height =	 this.cancelButton.offsetHeight + "px";
		this.buttPanel.style.position = "absolute";
		this.buttPanel.style.top = this.bigDiv.offsetTop + this.bigDiv.offsetHeight + "px";
		this.buttPanel.style.left = this.bigDiv.offsetLeft + this.bigDiv.offsetWidth / 2 - this.buttPanel.offsetWidth / 2;		
	},
	/* loadLGfile: Loads the list file into the bigDiv 
	*/
	loadLGfile: function()
	{
		/* Load the list generator with error checking */	
		var elf = this;
		if(window.ActiveXObject) 
		{
       		try 
       		{
        		  req = new ActiveXObject("Msxml2.XMLHTTP");
      		} 
      		  catch(e) 
      		  {
        		  try 
        		  {
          			req = new ActiveXObject("Microsoft.XMLHTTP");
        		  } 
        		  catch(e) 
        		  {
          		   req = false;
        		  }
            }
    	}
    	else if(window.XMLHttpRequest) 
    	{
    	    try 
    	    {
			   req = new XMLHttpRequest();
          } 
          catch(e) 
          {
			   req = false;
          }
      }
		if(req) 
		{
			req.onreadystatechange = loadLGFileToDiv;
			req.open("GET", this.lgfile, true);
			req.send("");
		}
		function loadLGFileToDiv()
		{
			if(req.readyState==4)
			{
				if(req.status == 200 || req.status == 0)
				{
					elf.bigDiv.innerHTML = req.responseText;
				}
				else
				{
					alert("ERROR CODE: " + req.status + "\n" + "Contact administrator or TennisSource.Net(R)");
					elf.putAwaySelector();
				}
			}
    	}
	},
	/* activateBigDiv: Allow the click selector to work 
	*/
	activateBigDiv: function()
	{
		/* When big div is clicked, change actImg according to clicked pic */
		Event.observe(this.bigDiv, "click", grabPic, true);
		var elf = this;
		function grabPic(e)
		{
		   if(e.srcElement)
         {
            if(e.srcElement.tagName=="IMG") elf.actImg.src=e.srcElement.src;	
         }
         else
         {
            if(e.target.tagName=="img" || e.target.tagName=="IMG") elf.actImg.src=e.target.src;	
         }    
		}
	},
	/* activateButtonPanel: Make the buttons work
	*/
	activateButtonPanel: function()
	{
		/* Assign button functionalities */
		var elf = this;
		this.cancelButton.onclick = function()
		{
			elf.putAwaySelector();
			elf.actImg.src = elf.oldSrc;
			elf.actImg.onclick = function()
			{
				elf.buildISelector();
				elf.loadLGfile();
				elf.activateBigDiv();
				elf.activateButtonPanel();
				elf.actImg.title="Click to Select Image";
				elf.actImg.onclick = function(){}
			}
		}
		this.submitButton.onclick = function()
		{
			elf.putAwaySelector();
			elf.oldSrc = elf.actImg.src;
			elf.callServerUpdate("filled");
			elf.actImg.onclick = function()
			{
				elf.buildISelector();
				elf.loadLGfile();
				elf.activateBigDiv();
				elf.activateButtonPanel();
				elf.actImg.title="Click to Select Image";
				elf.actImg.onclick = function(){}
			}
		}
		this.ClearButton.onclick = function()
		{
			elf.putAwaySelector();
			elf.actImg.src = elf.blanker;
			elf.oldSrc = elf.actImg.src;
			elf.callServerUpdate("empty");
			elf.actImg.onclick = function()
			{
				elf.buildISelector();
				elf.loadLGfile();
				elf.activateBigDiv();
				elf.activateButtonPanel();
				elf.actImg.title="Click to Select Image";
				elf.actImg.onclick = function(){}
			}
		}
	},
	/* callserverUpdate: Calls to the server for updates after submit or clear is chosen 
	*/
	callServerUpdate: function(status)
	{
		/* Branch to empty or filled */
		if(status == "empty") emptyServerCallISelector(this.iSpanName, this.actImg.src, this.blanker, this.upfile);
		if(status == "filled") filledServerCallISelector(this.iSpanName, this.actImg.src, this.blanker, this.upfile);
	},
	/* putAwaySelector: Tear down the selector 
	*/
	putAwaySelector: function()
	{
		/* Tear down statements */
		this.buttPanel.id = "TOBEREMOVEDBP";
		this.bigDiv.id = "TOBEREMOVEDBD";
		document.body.removeChild($("TOBEREMOVEDBP"));
		document.body.removeChild($("TOBEREMOVEDBD"));
	}
};

/*REQUIRED FUNCTION CALLS FOR SERVER INTERACTION*/
function filledServerCallISelector(iSpanID, actImgSRC, blanker, timeURL)
{
    if(actImgSRC == blanker)
    {
        emptyServerCallISelector(iSpanID, actImgSRC, blanker);
    }
    else
    {
        //Generate url
        if(!timeURL) var timeURL = "../lasso/iupdate.lasso"
        var x =  timeURL + '?page='+document.getElementById("page_name").value + '&id=' + iSpanID + '&aText=' + actImgSRC +"&-session=member:"+$F("sid")+ '&rd=1';
        //Make server call
        new Ajax.Request(x,{method: 'get'});
    }
}
function emptyServerCallISelector(iSpanID, actImgSRC, blanker, timeURL)
{
    //Generate url
    if(!timeURL) var timeURL = "../lasso/iupdate.lasso";
    var x =  timeURL + '?page='+document.getElementById("page_name").value + '&id=' + iSpanID + '&aText=' + 'IMGMISSING_EMPTY' +"&-session=member:"+$F("sid")+ '&rd=1';
    //Make server call
    new Ajax.Request(x,{method: 'get'});	
}