brito/scopely.html

## scopely.html
<!doctype html>
<title>Create-A-Vehicle</title>

<body>

<input id=name />
<select id=type>
  <option selected value=Car>Car</option>
  <option value=Motorcycle>Motorcycle</option>
</select>
<button id=create>Create!</button>

<ul id=list></ul>

<script>
var Scopely = {
  Abstract: {
    Vehicle: function(properties){
      for (var p in properties){
        if (p == 'name') this.setName(properties[p]);
        else this[p] = properties[p];
      }
    }
  },
  Instances: {}
};

Scopely.Abstract.Vehicle.prototype.getName = function(){ return this.name };
Scopely.Abstract.Vehicle.prototype.setName = function(name){ this.name = name };

Scopely.Abstract.Vehicle.prototype.__defineGetter__.seats = function(){ return this.seats };
Scopely.Abstract.Vehicle.prototype.__defineSetter__.seats = function(seats){ this.seats = seats };

Scopely.Abstract.Vehicle.prototype.__defineGetter__.wheels = function(){ return this.wheels };
Scopely.Abstract.Vehicle.prototype.__defineSetter__.wheels = function(wheels){ this.wheels = wheels };

Scopely.Instances.Car = function(name){
  return new Scopely.Abstract.Vehicle({
    name: name || (+new Date).toString(36),
    seats: 5,
    wheels: 4
  });
};

Scopely.Instances.Motorcycle = function(name){
  return new Scopely.Abstract.Vehicle({
    name: name || (+new Date).toString(36),
    seats: 2,
    wheels: 2
  });
};

function info(vehicle){
  alert('name: %name \n seats: %seats \n wheels: %wheels'.replace(/%(\w+)/g, function($0, property){
    return vehicle[property];
  }));
}

function $(id){ return document.getElementById(id) }

function attach(obj, event, fn){
  if (typeof obj == 'string')
    obj = $(obj);

  if (obj.addEventListener)
    obj.addEventListener(event, fn, false);
  else
    obj.attachEvent('on' + event, fn);
}

attach('create', 'click', function(){
  var name = $('name').value || (+new Date).toString(36),
      type = $('type')[$('type').selectedIndex].value;
  Scopely.Instances[name] = new Scopely.Instances[type](name);

  var li = document.createElement('li');
  li.innerHTML = name;
  var button = document.createElement('button');
  button.innerHTML = 'i';
  attach(button, 'click', function(){ info(Scopely.Instances[name]) })
  li.appendChild(button);
  $('list').appendChild(li);
});

</script>
	<!doctype html>
	<title>Create-A-Vehicle</title>

	<body>

	<input id=name />
	<select id=type>
	<option selected value=Car>Car</option>
	<option value=Motorcycle>Motorcycle</option>
	</select>
	<button id=create>Create!</button>

	<ul id=list></ul>

	<script>
	var Scopely = {
	Abstract: {
	Vehicle: function(properties){
	for (var p in properties){
	if (p == 'name') this.setName(properties[p]);
	else this[p] = properties[p];
	}
	}
	},
	Instances: {}
	};

	Scopely.Abstract.Vehicle.prototype.getName = function(){ return this.name };
	Scopely.Abstract.Vehicle.prototype.setName = function(name){ this.name = name };

	Scopely.Abstract.Vehicle.prototype.__defineGetter__.seats = function(){ return this.seats };
	Scopely.Abstract.Vehicle.prototype.__defineSetter__.seats = function(seats){ this.seats = seats };

	Scopely.Abstract.Vehicle.prototype.__defineGetter__.wheels = function(){ return this.wheels };
	Scopely.Abstract.Vehicle.prototype.__defineSetter__.wheels = function(wheels){ this.wheels = wheels };

	Scopely.Instances.Car = function(name){
	return new Scopely.Abstract.Vehicle({
	name: name \|\| (+new Date).toString(36),
	seats: 5,
	wheels: 4
	});
	};

	Scopely.Instances.Motorcycle = function(name){
	return new Scopely.Abstract.Vehicle({
	name: name \|\| (+new Date).toString(36),
	seats: 2,
	wheels: 2
	});
	};

	function info(vehicle){
	alert('name: %name \n seats: %seats \n wheels: %wheels'.replace(/%(\w+)/g, function($0, property){
	return vehicle[property];
	}));
	}

	function $(id){ return document.getElementById(id) }

	function attach(obj, event, fn){
	if (typeof obj == 'string')
	obj = $(obj);

	if (obj.addEventListener)
	obj.addEventListener(event, fn, false);
	else
	obj.attachEvent('on' + event, fn);
	}

	attach('create', 'click', function(){
	var name = $('name').value \|\| (+new Date).toString(36),
	type = $('type')[$('type').selectedIndex].value;
	Scopely.Instances[name] = new Scopely.Instances[type](name);

	var li = document.createElement('li');
	li.innerHTML = name;
	var button = document.createElement('button');
	button.innerHTML = 'i';
	attach(button, 'click', function(){ info(Scopely.Instances[name]) })
	li.appendChild(button);
	$('list').appendChild(li);
	});

	</script>