// JavaScript Document


<!--
document.observe("dom:loaded", function() {
//	debugger;
	var PullTab = Class.create({
		initialize: function(puller, transitioner) {
			this.puller = $(puller);
			this.anchor = this.puller.down('a.puller');
			this.transitioner = transitioner;
			this.transitioner.setElement(this.puller);
			this.anchor.observe('click', this.onclick.bindAsEventListener(this));
		},
		onclick: function(evt) {
			this.transitioner.toggle();
		}
		
	});

	var Transitioner = Class.create({
		initialize: function() {
			this.isIn = false;
		},
		setElement: function(elem) {
			this.element = elem;
		},
		toggle: function() {
			if (this.isIn) {
				this.transOut();
				this.isIn = false;
			} else {
				this.transIn();
				this.isIn = true;
			}
		},
		transIn: function() {},
		transOut: function() {}		
	});

	var Tab1Transitioner = Class.create(Transitioner, {
		transIn: function() {
			new Effect.Morph(this.element, {style:'width:340px;'});
		},
		transOut: function() {
			new Effect.Morph(this.element, {style:'width:115px;'});
		}
	});

	var Tab2Transitioner = Class.create(Transitioner, {
		transIn: function() {
			new Effect.Move(this.element, { x: 225, y: 0 });
		},
		transOut: function() {
			new Effect.Move(this.element, { x: -225, y: 0 });
		}
	});

	var Tab3Transitioner = Class.create(Transitioner, {
		transIn: function() {
			new Effect.Morph(this.element, {style:'width:352px;'});
		},
		transOut: function() {
			new Effect.Morph(this.element, {style:'width:117px;'});
		}
	});

	var tab1 = new PullTab('tab1', new Tab1Transitioner());
	var tab2 = new PullTab('tab2', new Tab2Transitioner());
	//var tab3 = new PullTab('tab3', new Tab3Transitioner());
});
//-->