Number.implement({

	/*
	Property: numberFormat
		Format a number with grouped thousands.

	Arguments:
		decimals, optional - integer, number of decimal percision; default, 2
		dec_point, optional - string, decimal point notation; default, '.'
		thousands_sep, optional - string, grouped thousands notation; default, ','

	Returns:
		a formatted version of number.

	Example:
		>(36432.556).numberFormat()  // returns 36,432.56
		>(36432.556).numberFormat(2, '.', ',')  // returns 36,432.56
	*/

	format : function(decimals, dec_point, thousands_sep) {
		decimals = Math.abs(decimals) + 1 ? decimals : 2;
		dec_point = dec_point || '.';
		thousands_sep = thousands_sep || ',';
	
		var matches = /(-)?(\d+)(\.\d+)?/.exec((isNaN(this) ? 0 : this) + ''); // returns matches[1] as sign, matches[2] as numbers and matches[3] as decimals
		var remainder = matches[2].length > 3 ? matches[2].length % 3 : 0;
		return (matches[1] ? matches[1] : '') + (remainder ? matches[2].substr(0, remainder) + thousands_sep : '') + matches[2].substr(remainder).replace(/(\d{3})(?=\d)/g, "$1" + thousands_sep) + 
				(decimals ? dec_point + (+matches[3] || 0).toFixed(decimals).substr(2) : '');
	}


});

var Product = new Class({
	Implements: [Events,Options],
	options: {},
	initialize: function(productConfig,priceConfig){
		return false;
		
		/*
			SETUP THE ATTRIBUTE OBJECT
		*/
		this.productAttributes = new Hash(productConfig.attributes);
		this.basePrice = productConfig.basePrice;
		this.oldPrice = productConfig.oldPrice;
		this.productId = productConfig.productId;
		this.taxConfig = new Hash(productConfig.taxConfig);
		this.template = productConfig.template;				
		this.initOptions(this.productAttributes);
	},
	optionChanged : function(e){
		// NEED TO LOOP THROUGH ALL SELECTED ATTRIBUTES AND UPDATE THE PRICE DISPLAYED ON THE SITE
			// var newPrice = this.basePrice.toFloat() + e.target.getSelected().retrieve('option_price')[0].toFloat();
			// $(document.body).getElements('.price').set('text','$'+newPrice.format());
	},
	initOptions: function (attrs) {
		
		attrs.each(function(attribute){
			// console.log(attribute);
			
			//console.log(this);
			
			this.selectBox = $('attribute'+attribute.id); // get the target select box
			this.selectBox.addEvent('change',this.optionChanged.bindWithEvent(this));
			
			attribute.options.each(function(sel_option, index){ // loop through all of the attribute options and then create select box options out of them.
				//console.log($type(sel_option.price));
				var priceOffset = "";
				if(sel_option.price > 0){
					 priceOffset = "+ $" + sel_option.price.toFloat().format();
				}
				else if(sel_option.price == 0){
					
				}
				else{
					priceOffset = sel_option.price;
				}
				// create radio inputs if needed here else do options //
				
				var opt = '';
				var opt_label = '';
				var swatch = '';
				if(attribute.code == 'color'){
					swatch = new Swatch({
				    	container : this.selectBox,
				    	target	  : 'swatchValue',
				    	copy	  : sel_option.label,
				    	value	  : sel_option.id,
						text	  : sel_option.label + " " + priceOffset
					})
					opt = swatch.element;
					if(index == 0){
						opt.addClass('active');
						$('swatchValue').set('value', sel_option.id)	
					}
					/* 
					opt = new Element('input',{
						'type'	: 'radio',
						'name'	: 'select_size',
						'value' : sel_option.id,
						'text'	: sel_option.label + " " + priceOffset
					});
					opt_label = new Element('label',{
						'text'	: sel_option.label + " " + priceOffset
					});
					*/
				}else if(attribute.code == 'shirt_size'){
					opt = new Element('option',{
						'value'	: sel_option.id,
						'text' 	: sel_option.label + " " + priceOffset
					});
				}
				
				// need to be able to attach price object to be used when selection changes to update price
				/*
				opt.store('option_price',sel_option.price);
				opt.store('option_products',sel_option.products);
				*/
				
				opt.inject(this.selectBox);
				if(opt_label){
					opt_label.inject(this.selectBox);
				}
				
			}.bind(this));
		}.bind(this));
		
	}
});




 /* 
    swatch class
    
*/


var Swatch = new Class({
	Implements: [Options],	
    options:{
    	// passed when creating new Countdown
    	container : null,
    	target	  : null,
    	copy	  : null,
    	value	  : null,
		text	  : null
    },
    initialize: function(options){
    	this.setOptions(options);
    	this.container	 	= $(this.options.container); 
    	this.target		 	= $(this.options.target); 
    	this.value		 	= this.options.value; 
    	this.copy			= '<img src="/resources/images/swatches/' + (this.options.copy.replace(' ','-')).replace('/','-') + '.jpg"/ alt="'+ this.options.copy +'"><em>' + this.options.copy  + '</em>';
		this.element		= this.init();
		return this;
	},
	init : function(){
		return new Element('span',{
			'id':'swatch-' + this.value,
			'html':this.copy,
			'class':'sel_swatch',
			'events':({
				// binding with even here passes event, and makes "this" in select the event, so no longer had access to this.options... etc
				'click': this.select.bind(this)
			})
		})
		
	},
	clear : function(){
		this.selections = this.container.getElements('span');
		this.selections.each(function(el){
			el.removeClass('active')
		})		
		this.element.addClass('active');
	},
	select : function(){
		this.target.set('value', this.value);
		this.clear();
	}
});
Swatch.implement(new Events, new Options);