var LocationSelect = new Class
({
  Implements: Options,
  // Options defaults
  options:
  {
    // Required: the ID and name to use for the state selection box
    stateSelect: false,
    
    // Required: the ID and name to use for the city select box
    citySelect: false,
    
    // The path to the ajax functions file
    ajaxPath: '../include/ajaxController.php',
		
		// Show top level cities only
		topLevelOnly: false,
    
    // Label to display next to the city select box 
    //cityLabel: 'City: ',
    
    // Class to add to the city select box (useful for adding width styles so the select box does not shrink and grow
    // after state is changed and being initialized)
    //citySelectClass: 'locationCity',
    
    // The ID of the element to place error messages into, if no ID is given, errors will appear in alert() popups
    errorOutput: false,
    
    // ID of the loading placeholder to hide once the location select is set up (if none is given, no loading
    // element should be present)
    loadingPlaceholder: false
    
    // Label to display next to the state selection box
    //stateLabel: 'State: ',
    
    // Class to add to the state selection box, see citySelectClass for more info
    //stateSelectClass: 'locationState'
    
    // Cache results? - this may be of limited usefulness, mostly these calls are tiny and execute only one SQL query
  },
  initialize: function(options)
  {
    this.setOptions(options);
    //this.setupSelects();
    var selectStateFunction = this.selectState.bind(this);
		if (!$(this.options.stateSelect))
		{
			return false;
		}
		$(this.options.stateSelect).addEvent('change', selectStateFunction);
  },
	/*
  setupSelects: function()
  {
    if (!$(this.options.citySelect) || !$(this.options.stateSelect))
    {
      showError(this.options.errorOutput, 'Invalid state or city selector. Location select not configured properly.');
      
      return false;
    }
  
    var citySelectValue = $(this.options.citySelect).get('preselect');
    var stateSelectValue = $(this.options.stateSelect).get('preselect');
    var parent = $(this.options.citySelect).getParent();
    
    if ($(this.options.loadingPlaceholder))
    {
      parent = new Element('div',
      {
        'styles': 
        {
          'display': 'none'
        }
      }).inject(parent);
    }
      
    new Element('span',
    {
      'text': this.options.stateLabel
    }).inject(parent);
		
		var createSelects = false;
    var selectStateFunction = this.selectState.bind(this);
		if ($(this.options.citySelect).get('tag') != 'select' && $(this.options.citySelect).get('tag') != 'select')
		{
			createSelects = true;
    	$(this.options.citySelect).destroy();
    	$(this.options.stateSelect).destroy();
			
			new Element('select',
			{
				'name': this.options.stateSelect,
				'id': this.options.stateSelect,
				'class': this.options.stateSelectClass,
				'events':
				{
					'change': selectStateFunction
				} 
			}).inject(parent);
		}
		else
		{
			$(this.options.citySelect).empty();
			$(this.options.stateSelect).empty();
			
			$(this.options.stateSelect).addClass(this.options.stateSelectClass);
			$(this.options.stateSelect).addEvent('change', selectStateFunction);
			$(this.options.stateSelect).inject(parent);
		}
    
    new Element('option',
    {
      'value': '??',
      'text': '  '
    }).inject(this.options.stateSelect);
    
    var options = this.options;
    new Request.JSON
    ({
      url: options.ajaxPath,
      async: false,
      onFailure: function()
      {
        showError(options.errorOutput, 'Unable to send request for states');
        return false;
      },
      onComplete: function(jsonObject)
      {
        if (!jsonObject)
        {
          showError(options.errorOutput, 'Request for states failed');
          return false;
        }
        
        if (!jsonObject.success)
        {
          showError(options.errorOutput, jsonObject.error);
          return false;            
        }
        
        jsonObject.selectOptions.each(function(state)
        {
          new Element('option',
          {
            'value': state,
            'text': state
          }).inject($(options.stateSelect));
        });
        
        $(options.stateSelect).set('value', stateSelectValue);
      }
    }).get({'req': 'getLocationStates'});
    
    var cityDiv = new Element('div',
    {
      'styles': 
      {
        'padding-top': '5px'
      },
      'text': this.options.cityLabel
    }).inject(parent);
    
		if (createSelects)
		{
			new Element('select',
			{
				'name': this.options.citySelect,
				'id': this.options.citySelect,
				'class': this.options.citySelectClass
			}).inject(cityDiv);
		}
		else
		{
			$(this.options.citySelect).addClass(this.options.citySelectClass);
			$(this.options.citySelect).inject(cityDiv);
		}
    
    if (citySelectValue)
    {
      this.selectState();
      
      $(this.options.citySelect).set('value', citySelectValue);
    }
    else
    {
      new Element('option',
      {
        value: '',
        text: 'Select a state...'
      }).inject(this.options.citySelect);
    }
    
    if ($(this.options.loadingPlaceholder))
    {
      parent.setStyle('display', 'block');
      $(this.options.loadingPlaceholder).destroy();
    }
  },
	*/
  selectState: function()
  {    
    var options = this.options;
    new Request.JSON
    ({
      url: options.ajaxPath,
      async: false,
      onRequest: function()
      {
        $(options.citySelect).empty();
        
        new Element('option',
        {
          value: '',
          text: 'Loading...'
        }).inject(options.citySelect);
      },
      onFailure: function()
      {
        showError(options.errorOutput, 'Unable to send request for cities in the selected state');
        return false;
      },
      onComplete: function(jsonObject)
      {
        if (!jsonObject)
        {
          showError(options.errorOutput, 'Request for cities in the selected state failed');
          return false;
        }
        
        if (!jsonObject.success)
        {
          showError(options.errorOutput, jsonObject.error);
          return false;            
        }
        
        $(options.citySelect).empty();
        var defaultOptionText = $(options.stateSelect).get('value') == '??' ? 'Select a state...' : 'Please Select...';
        new Element('option',
        {
          value: '',
          text: defaultOptionText
        }).inject(options.citySelect); 
        
        jsonObject.selectOptions.each(function(op)
        {
					if (!Browser.Engine.gecko)
					{
						var i, indent = '';
						for (i = 0; i < op.depth; i++)
						{
							indent += ' - ';
						}
						var padding = 0;
					}
					else
					{
						var padding = op.depth * 7;
						var indent = '';
					}
					
          new Element('option',
          {
            value: op.locationID,
            text: indent+op.city,
						styles: 
						{
							'padding-left': padding
						}
          }).inject(options.citySelect);
        });
      }
    }).get({'req': 'getCitiesInState', 'state': $(options.stateSelect).get('value'), 'topLevelOnly': options.topLevelOnly});
  }
});