var CustomEnvelope = new Class.create();
CustomEnvelope.prototype = {
	initialize: function() {
		this.container = $('customCreator');
		this.form      = this.container.down('form');
		this.tab       = this.container.down('.tab');
		this.setup();
	},
	setup: function() {
		Event.observe(this.form, 'submit', this.save.bindAsEventListener(this));
		
		$$('a.next').each(function(e) {
			e.onclick = function() {
				this.form.submit();
				return false;
			}.bind(this)
		}.bind(this));
		
		switch(this.tab.id) {
			case 'windows' :
				this.doWindows($RF(this.form, 'numOfWindows'));
				new Form.Element.RadioEventObserver(this.form, 'numOfWindows', this.doWindows.bindAsEventListener(this));
				break;
			
			case 'paperType' :
				new PaperTypeBrowser();
				break;
			
			case 'printingOpts' :
				this.doPrintingOpt($RF(this.form, 'printing'));
				new Form.Element.RadioEventObserver(this.form, 'printing', this.doPrintingOpt.bindAsEventListener(this));
				break;
			
			case 'contact' :
				this.validator = new Validation(this.form, {onSubmit: false});
				break;
		}
	},
	save: function(event) {
		if (this.validator) {
			if (!this.validator.validate()) {
				alert('Please fill in all required fields\n' +
				      'before submitting the form.\n\n' +
				      'Thank You!');
				Event.stop(event);
				return;
			}
		}
		
		this.form.submit();
	},
	doWindows: function(el) {
		if (!el) return;
		
		var windows;
		if (typeof el == 'object') {
			windows = el.value;
		} else {
			windows = el;
		}
		
		switch (windows) {
			case '0':
				Element.hide('window1');
				Element.hide('window2');
				break;
				
			case '1':
				Element.show('window1');
				Element.hide('window2');
				break;
				
			case '2':  
				Element.show('window1');
				Element.show('window2');
				break;
		}
	},
	doPrintingOpt: function(el) {
		var opt = (typeof el == 'object') ? el.value : el;
		if (opt == 'yes') {
			Element.show('numColors');
			Element.show('numSides');
			Element.show('printTime');
			this.form.down('div.btm').style.paddingTop = '10px';
		} else {
			Element.hide('numColors');
			Element.hide('numSides');
			Element.hide('printTime');
			this.form.down('div.btm').style.paddingTop = '125px';
		}
	}
}

/*--------------------------------------------------------------------------*/

var PaperTypeBrowser = Class.create();
PaperTypeBrowser.prototype = {
	initialize: function() {
		this.collectionsLoaded = false;
		this.setup();
	},
	setup: function() {
		Event.observe('colorButton', 'click', this.showColors.bindAsEventListener(this));
		Event.observe('collectionButton', 'click', this.showCollections.bindAsEventListener(this));
		
		this.selectColorType();
		
		$('colorSets').style.width = $('colorSet').getWidth() + 100 + "px";
		this.scroller = new Control.Scroller('colorSets', 'knob', 'track', {
			axis:  'horizontal',
			up:    'scrollLeft',
			down:  'scrollRight',
			delta: 85
		});
	},
	showColors: function(event) {
		var el = Event.findElement(event, 'a');
		if (el.hasClassName('active')) {
			$('colorButton').removeClassName('active');
			$('collectionButton').addClassName('active');
			this.swap('COLORS');
		}
		Event.stop(event);
	},
	showCollections: function(event) {
		var el = Event.findElement(event, 'a');
		if (el.hasClassName('active')) {
			$('colorButton').addClassName('active');
			$('collectionButton').removeClassName('active');
			if (this.collectionsLoaded == false) {
				this.loadCollections();
			} else {
				this.swap('COLLECTIONS');
			}
		}
		Event.stop(event);
	},
	loadCollections: function() {
		new Ajax.Request('/ae/control/loadColorScroller', {
			method:     'get',
			parameters: {'searchPage': 'shopByCollection', 'scrollerType' : 'customEnvelope'},
			onComplete: function(transport) {
				this.collectionsLoaded = true;
				var items = $('colorSet').getElementsByTagName('li');
				var total = items.length;
				for (var i = 0; i < total; i++) {
					Element.hide(items[i]);
				}
				new Insertion.Bottom('colorSet', transport.responseText);
				this.scroller.reset();
			}.bind(this)
		});
	},
	swap: function(category) {
		var colors = $('colorSet').getElementsBySelector('li');
		for (var i = 0; i < colors.length; i++) {
			var color = colors[i];
			if (color.hasClassName(category)) {
				color.show();
			} else {
				color.hide();
			}
		}
		this.scroller.reset();
	},
	selectColorType: function() {
		var selectedColor = $F('selectedColorType');
		if (selectedColor == '') return;
		
		var radios = $('colorSet').getElementsBySelector('input');
		for (var i = 0; i < radios.length; i++) {
			radios[i].checked = (radios[i].value == selectedColor);
		}
	}
}


/*--------------------------------------------------------------------------*/

Event.onDOMReady(function() {
	new CustomEnvelope();
});