function filterDeviceTypes(stringToMatch) {
  $$('#phone_picker li').each(function(deviceType){
    var equipmentName = deviceType.select('span').first().innerHTML;
	  var re = new RegExp(stringToMatch, "i");
	  if (equipmentName.match(re)) {
	    deviceType.style.display = "block";
	  }
	  else {
	    deviceType.style.display = "none";
		}
	});
}

function replaceLastTagFragmentWith(tagName) {
  var currentFieldValue = $('template_tags').value;
  var tagList = currentFieldValue.split(",");
  tagList.pop();
  tagList.push(tagName);
  $('template_tags').value = tagList.join(",");
  justHidTheTagList = true;
  $('tag_list').hide();
}

// I don't think this works in conjunction with the observer
function pressedTemplateTags(event) {
  if (event.keyCode == 40) {
    alert("DOWN!!!");
  } else if(event.keyCode == 100) {
	alert("ENTER!!!");
  }

}


Canvas = {
  onLoadBrowserTagging: function() {
    BrowserDetect.init();
    html = $$("html").first();
    html.addClassName(BrowserDetect.OS);
    html.addClassName(BrowserDetect.browser);
    html.addClassName(BrowserDetect.version);
    //alert("browser => " + BrowserDetect.OS + " | " + BrowserDetect.browser + " | " + BrowserDetect.version);
  }
}
document.observe("dom:loaded", function() {Canvas.onLoadBrowserTagging()});


Canvas.User = {
  manuallyAssignClick: function() {
    $('manually_assign_link').hide();
    $('password_fields').show();
    $('auto_assign_link').show();
    $('passwords_shown').value ='true';
  },
  
  autoAssignClick: function() {
    $('password_fields').hide();
    $('auto_assign_link').hide();
    $('manually_assign_link').show();
    $('password_input').value = '';
    $('passwords_shown').value ='true';
    $('password_confirm_input').value = '';
  }
}

Canvas.DeviceTypePicker = {
  version: 1,
  memo: "DeviceTypePicker",
  
  ctor: null,
  instance: null,
  create_ctor: function() {
    ctor = function() {
      this.hiddenField = $("device_type_id");
      this.listView = $("device_type_list_view");
      this.listViewContainer = $("device_type_list_view_container");
      this.deviceTypeImage = $('device_type_image');
      this.deviceTypeText = $('device_type_text');
      this.deviceTypeDesc = $('device_type_description');
      this.listViewLoaded = false;
    },

    // initialize prototype:
    proto = {}
    proto.klass = Canvas.DeviceTypePicker;
    
    proto.onPickerClick = function(url) {
      this.openListView(url);
    }
    
    proto.initiateListViewContentRequest = function(url) {
      // ajax request:
      fnOnSuccess = function(that){ return function(transport){that.handleListViewContentResponse(transport);};}(this);
      this.request = new Ajax.Request(url, { method: 'get', onSuccess: fnOnSuccess} );
    }
    
    proto.handleListViewContentResponse = function(transport) {
      this.loadListView(transport.responseText);
    }
    
    proto.openListView = function(url) {
      this.listViewContainer.appear({duration:0.5});
      if (!this.listViewLoaded) {
        this.initiateListViewContentRequest(url);
      }
      this.onListViewOpened();
    }
    
    proto.onListViewOpened = function() {
    }
    
    proto.loadListView = function(text) {
      this.listView.innerHTML = text;
      this.onListViewLoaded();
    }
    
    proto.onListViewLoaded = function() {
      this.listViewLoaded = true;
    }
    
    proto.closeListView = function() {
      this.listViewContainer.fade({duration:0.2});
      this.onListViewClosed();
    }
    
    proto.onListViewClosed = function() {
    }
    
    proto.onListViewClick = function(deviceTypeId, deviceTypeImageUrl, deviceTypeDescription) {
      this.chooseDevice(deviceTypeId, deviceTypeImageUrl, deviceTypeDescription);
    }
    
    proto.chooseDevice = function(deviceTypeId, deviceTypeImageUrl, deviceTypeDescription) {
      this.hiddenField.value = deviceTypeId;
      this.deviceTypeImage.src = deviceTypeImageUrl;
      this.deviceTypeDesc.innerHTML = deviceTypeDescription;
      this.deviceTypeText.innerHTML = "Click here to choose a different model";
      this.onDeviceChosen();
    }
    
    proto.onDeviceChosen = function() {
      this.closeListView();
    }

    // assign prototype:
    ctor.prototype = proto;
    return ctor;
  },

  create: function() {
    if (this.instance == null) {
      if (this.ctor == null) {
        this.ctor = this.create_ctor();
      }
      this.instance = new this.ctor();
    }
    
    return this.instance;
  }
}

Canvas.SalesAssociateUpdater = {
  version: 1,
  memo: "SalesAssociatePicker",
  
  ctor: null,
  instance: null,
  create_ctor: function() {
    ctor = function() {
      this.view = $("sales_associate_updater_view");
      this.viewContainer = $("sales_associate_updater_view_container");
      this.spinner = $("sales_associate_updater_spinner");
    },

    // initialize prototype:
    proto = {}
    proto.klass = Canvas.SalesAssociateUpdater;
    
    proto.onClick = function(userId, contentUrl) {
      this.openView(userId, contentUrl);
    }
    
    proto.openView = function(userId, contentUrl) {
      this.view.innerHTML = this.spinner.innerHTML;
      this.viewContainer.appear({duration:0.25});
      this.initiateViewContentRequest(userId, contentUrl);
      this.onViewOpened();
    }
    
    proto.onViewOpened = function() {
    }
    
    proto.initiateViewContentRequest = function(userId, contentUrl) {
      // ajax request:
      fnOnSuccess = function(that){ return function(transport){that.handleViewContentResponse(transport);};}(this);
      request = new Ajax.Request(contentUrl, { method: 'get', onSuccess: fnOnSuccess} );
      request.userId = userId;
    }
    
    proto.handleViewContentResponse = function(transport) {
      this.loadView(transport.responseText);
    }
    
    proto.loadView = function(text) {
      this.view.innerHTML = text;
      this.onViewLoaded();
    }
    
    proto.onViewLoaded = function() {
    }
    
    proto.closeView = function() {
      this.viewContainer.fade({duration:0.2});
      this.onViewClosed();
    }
    
    proto.onViewClosed = function() {
      this.view.innerHTML = '';
    }
    
    proto.updateUser = function(userId, userClass) {
      img = $('update_sales_associate_ajax_loader');
      img.style.display = 'inline';
      this.initiateSetUserSalesAssociateRequest(userId, userClass);
    }
    
    proto.onUserUpdated = function(userId, salesAssociateName) {
      this.closeView();
      this.updateListView(userId, salesAssociateName);
    }
    
    proto.updateListView = function(userId, salesAssociateName) {
      cell = $('sales_assoc_'+userId+'_cell');
      row = $('sales_assoc_'+userId+'_row');
      cell.innerHTML = salesAssociateName;
      new Effect.Highlight(row, {duration:3.0, startcolor: '#99ffff', restorecolor: true})
      this.onListViewUpdated();
    }
    
    proto.onListViewUpdated = function() {
    }
    
    proto.initiateSetUserSalesAssociateRequest = function(userId, userClass) {
      form = $('edit_' + userClass + '_' + userId);
      url = form.action;
      fnOnSuccess = function(that){ return function(transport){that.handleSetUserSalesAssociateResponse(transport);};}(this);
      request = new Ajax.Request(url, { method: 'post', onSuccess: fnOnSuccess, parameters: Form.serialize(form)} );
      request.userId = userId;
    }

    proto.handleSetUserSalesAssociateResponse = function(transport) {
      userId = transport.request.userId;
      salesAssociateName = transport.responseText;
      this.onUserUpdated(userId, salesAssociateName);
    }

    // assign prototype:
    ctor.prototype = proto;
    return ctor;
  },

  create: function() {
    if (this.ctor == null) {
      this.ctor = this.create_ctor();
    }
    instance = new this.ctor();
    return instance;
  }
}