var Configurator = Class.create({
	initialize: function(productJson, inputElem, wrapperElem, imageElem, zoomElem, side) {
		this.products = productJson;
		this.input = inputElem;
		this.wrapper = wrapperElem;
		this.image = imageElem;
		this.zoom = zoomElem;
		this.side = side;
		this.sizes = new Array();
		this.leftCheck = false;
		this.rightCheck = false;
		
		//init the color swatches
		this.wrapper.down('.color-options li').addClassName('active');
		this.wrapper.select('.color-options li').each(function(li) {
			li.observe('click', function(event) {
				var element = Event.element(event);
				element.siblings().each(function(sibling) {
					if(sibling.hasClassName('active')) sibling.removeClassName('active');
				});
				element.addClassName('active');
				this.checkSelected();
				this.resetSizes();
				this.updateImage(element);
			}.bind(this));
		}.bind(this));
		
		//init the size dropdown options
		this.wrapper.select('.super-attribute-size option').each(function(option) {
			this.sizes[option.value] = option.text;
			option.remove();
		}.bind(this));
		this.resetSizes();
		
		//init the size dropdown
		this.wrapper.down('.super-attribute-size').observe('change', function() {
			var element = this.wrapper.down('.super-attribute-size');
			this.updateImage(element);
		}.bind(this));
		this.wrapper.down('.super-attribute-size').observe('keyup', function() {
			var element = this.wrapper.down('.super-attribute-size');
			this.updateImage(element);
		}.bind(this));
		
		//init the hidden side dropdown
		this.wrapper.select('.super-attribute-side option').each(function(option) {
			if(option.text == this.side) {
				option.selected = true;
			}
		}.bind(this));
		
		//init images
		this.updateImage();
	},
	
	preloadImages: function() {
		var imgs = new Array();
		var x = 0;
		for(var y=0; y<this.products.length; y++) {
			imgs[x] = new Image();
			imgs[x].src = this.products[y].image; x++;
			imgs[x] = new Image();
			imgs[x].src = this.products[y].image_fullsize; x++;
		}
	},

	checkSelected: function() {
		/*
		var rightActive = $$('.right-cup .color-options .active');
		var leftActive = $$('.left-cup .color-options .active');
		if(!this.leftCheck) {
			var leftCheck = document.createElement('div');
			leftCheck.id = "left-check";
			leftCheck.innerHTML = "&nbsp;";
			this.leftCheck = leftCheck;
			leftCup = $$('#tab:create-your-perfect-bra .left-cup');
			leftCup = leftCup[0]
			leftCup.appendNode(this.leftCheck);
		}
		if(!this.rightCheck) {
			var rightCheck = document.createElement('div');
			rightCheck.id = "right-check";
			rightCheck.innerHTML = "&nbsp;";
			this.rightCheck = rightCheck;
			rightCup = $$('#tab:create-your-perfect-bra .right-cup');
			rightCup = rightCup[0];
			rightCup.appendNode(this.rightCheck);
		} */
	},
	
	resetSizes: function() {
		var color = this.wrapper.down('.color-options .active').value;
		var side = $F(this.wrapper.down('.super-attribute-side'));
		var current = $F(this.wrapper.down('.super-attribute-size'));
		var select = this.wrapper.down('.super-attribute-size');
		select.childElements().invoke('remove');
		
		for(value in this.sizes) {
			for(var x=0; x<this.products.length; x++) {
				if(value == this.products[x].fresh_size_bra &&
					this.products[x].fresh_bra_side == side &&
					this.products[x].fresh_color_config == color) {
					var selected = (value == current) ? ' selected="selected"' : '';
					select.insert({ bottom:'<option value="' + value + '"' + selected + '>' + this.sizes[value] + '</option>' });
					break;
				}
			}
		}
		
		var selected = this.wrapper.select('.super-attribute-size option[selected="selected"]');
		if(selected.length) selected.first().selected = true;
		else this.wrapper.down('.super-attribute-size option').selected = true;
	},
	
	updateImage: function(elem) {
		var color = this.wrapper.down('.color-options .active').value;
		var size = $F(this.wrapper.down('.super-attribute-size'));
		var side = $F(this.wrapper.down('.super-attribute-side'));
		
		for(var x=0; x<this.products.length; x++) {
			if(this.products[x].fresh_bra_side == side && 
				this.products[x].fresh_color_config == color && 
				this.products[x].fresh_size_bra == size) {
				if(this.image.up(0).hasClassName('main-image')) {
					this.image.writeAttribute('src', this.products[x].image);
				} else {
					var id = this.image.id;
					Element.replace(this.image.up(0), '<img id="' + id + '" src="' + this.products[x].image + '" />');
					this.image = $(id);
				}
				this.input.value = this.products[x].id;
				MojoZoom.makeZoomable(
					$(this.image),
					this.products[x].image_fullsize,
					this.zoom,
					this.zoom.getWidth(),
					this.zoom.getHeight(),
					false
				);
			}
		}
	}
	
});