/**
 * The base class for all Selector Widgets.  This class opens a window next to where
 * the selector button is pressed.
 *
 * @param objectName {string} - name of the variable for the selector widget, used to generate event code on the fly
 * @param fieldName {string} - name of input field that represents the current selection.
 * @param directions {string} - the directions above the Selector 
 * @param itemsPerRow {int} - how many items should be 
 * @param idToValue {array} - associative array that maps names of selector html elements to values  e.g. idToValue['color25'] = "#FF9900"; 
 * @constructor
 */
SelectorWidget = function(objectName, fieldID, directions, itemsPerRow, idToValue) 
{
	this.init(objectName, fieldID, directions, itemsPerRow, idToValue);
};

SelectorWidget.prototype = 
{
    objectName: null,    //used to insert events with this objectName
    inputID: null,
    perRow : 5,
    selectorHeader: "Select an Item", /* directions above the Selector Widget Html */  
    containerBuilt: false,
    dataMap : new Array(),
    callerElement : null,
    //
    init: function(objectName, fieldID, directions, itemsPerRow, idToValue) 
    {
        if(!document.getElementById)  //currently script only supports modern browsers (tested with Firefox 1.1+ and ie6+)
        {
           return;
        }
        this.objectName = objectName;
        this.inputID = fieldID;
		this.selectorHeader = directions;
		this.perRow = itemsPerRow;
		this.dataMap = idToValue;
    },
    getSelectorHtml : function()
    {
        var anItem;
        var itemCount = 0;
        var selString = "<br style='clear:both;margin-top:0px;padding:0;'>"; //"
        
        for(anItem in this.dataMap)
        {
           selString += this.getItemHtml(anItem);
           
           itemCount++;            
           if((itemCount % this.perRow) == 0)
           {
              selString += "<br style='clear:both;margin-top:0px;padding:0px;'>";
           }
        }
        //alert("Returning selection string: " + selString);
        return selString;
    },
    getItemHtml : function(selItem)
    {
      //OVERRIDE OVERRIDE OVERRIDE
    },
    setField :function(itemID, val) 
	{
	    var dataField = document.getElementById(this.inputID);   //Input Field 
	    //The textbox now actually contains no # sign, so we remove it before setting hte field
	    if(val != '')
	    {
	    	dataField.value = val.substring(1);                                 //Set Input Field
        }
        else
        {
            dataField.value = val;
        }
        var selector = document.getElementById(this.objectName);
	    selector.style.display = 'none';                         //Hide the selector
	    this.afterFieldSet(itemID, val);
	    
	    //TO-DO ADD
	    //it should determine the input type (drop-down, textfield, listbox)
	},
	afterFieldSet : function(itemID, val)
	{
	     /* OVERRIDE OVERRIDE OVERRIDE  */
	     //see ColorSelector for example	     
	},
	buildContainer : function()
	{
	    if (!document.createElement || !document.getElementById) 
	    { return; }
	    var conDiv = document.createElement('div');
	    
	    conDiv.id = this.objectName;
		conDiv.style.position = 'absolute';
	    conDiv.style.display = 'none';
	    conDiv.style.border = '#000000 1px solid';
	    conDiv.style.background = '#FFFFFF';
	    conDiv.style.zIndex = 9999;
	    
	    conDiv.innerHTML = '<span style="font-family: Arial, Helvetica, sans-serif; font-size:11px;">' +  this.selectorHeader	+ '&nbsp;&nbsp;&nbsp;&nbsp;'        
	        + '<a href="javascript:' + this.objectName + '.setField(\'none\',\'\');"><img border="0" width="12" height="12" src="noselect.gif"></a>' //<br>' 
	       	+ this.getSelectorHtml();
	    
	    this.applyAdditionalStyles(conDiv);
	    document.body.appendChild(conDiv);

	    //add all the onclick events to 
	    
	    //apply addictional styles
	    this.applyAdditionalStyles(conDiv);
			
	    this.containerBuilt = true;
	},
	applyAdditionalStyles : function(containerDiv)
	{
	   //optionally override 
	},
	showHideSelector : function(e) //passes in event
	{
	    if (!e) var e = window.event;
	    if (!this.containerBuilt) 
	    { 
	    this.buildContainer(); 
	    }
	    var selector = document.getElementById(this.objectName);     	
		if (selector.style.display == 'block')
		{
			selector.style.display = 'none';
			this.callerElement = null;
	    	return;
		}
		else
		{
  	       var selCaller = this.getTarget(e);
           this.callerElement = selCaller;
           //INPUT ID CHANGED TO WHATEVER THE CALLER IS + FIELD, THAT IS THE PRICE YOU MUST PAY TO HAVE UNIVERSAL SELECTOR-WIDGET-NESS
           this.inputID = selCaller.id + "Field";  
           
           //This only needed when using WZ image library so popup is in front of those images
           //selector.zIndex = 99999;
	       selector.style.top = this.getTopPosition(selCaller) + 20 +"px";
	       selector.style.left = this.getLeftPosition(selCaller) +"px";     
		   selector.style.display = 'block';
		}
	},
	getTarget: function(evt,tagType)
	{
	    if (evt.target)
	       targ = evt.target;
	    else if (evt.srcElement) 
	       targ = evt.srcElement;
	    
	    if (targ.nodeType == 3)     // defeat Safari bug
	       targ = targ.parentNode;
	        
	    //alert("returning id:" + targ.id + " tagtype: " + targ.tagName);
	    return targ;
    },
    getLeftPosition : function (node)
	{
		var totLeft = 0;
	 	if (node.offsetParent)
	 	{
	 		while (node.offsetParent)
	 		{
	 			totLeft += node.offsetLeft
	 			node = node.offsetParent;
	 		}
		}
		return totLeft;
	},
	getTopPosition : function(node)
	{
	   var totTop = 0;
	   if (node.offsetParent)
	   {
	 	  while (node.offsetParent)
	 	  {
	 	  	 totTop += node.offsetTop
	 		 node = node.offsetParent;
	 	  }
	   }
	   return totTop;
    }
}