/*
Canvas app on backbone.js
*/

/* namespacing */

(function() {
 
	window.App = {
		Models: {},
		Collections: {},
		Views: {}
	};
	 
	window.template = function(id) {
		var html = jQuery('#' + id).html();
		return _.template( jQuery('#' + id).html() );
	};

})();

/*-------------------------------------------------------------------------------------------------------------/
----------------------------------------------- GLOBAL VARIABLES ----------------------------------------------
--------------------------------------------------------------------------------------------------------------*/

var console = console || {};
console.log = console.log || function(){};

App.baseURL = document.getElementById('base_url').value;
App.assetsURL = document.getElementById('assets_url').value;
App.product_id = document.getElementById('product_id').value;
App.customization_id = document.getElementById('customization_id').value;

if(App.baseURL == 'https://dev.citizenmade/index.php/') {
	App.resourcesURL = App.assetsURL + 'uploads/';
	App.environment = 'local';
}
else if (App.baseURL == 'https://dev.citizenmade.co/index.php/') {
	App.resourcesURL = App.assetsURL + 'uploads/';
	App.environment = 'dev';
}
else {
	App.resourcesURL = (("http:"===document.location.protocol)?"http:":"https:")+"//"+'resources.citizenmade.co/uploads/';
	App.environment = 'prod';
}
console.log('Product ID: ' + App.product_id);

//added to keep track of thin/thick table - default is thin
selectedID = 725;
//to keep track of table size price to compare it to table thickness price
sizePrice = 0;
//a switch to see which view was opened more recently -- size or thickness
//1 = table size view and 2 = table thickness view
switchView = 0;
//to keep track if they have viewed the size selection yet
sizeView = false;
//get product id
productID = App.product_id = document.getElementById('product_id').value;

/*-------------------------------------------------------------------------------------------------------------/
----------------------------------------------- MODELS ---------------------------------------------------------
--------------------------------------------------------------------------------------------------------------*/


App.Models.Canvas = Backbone.Model.extend({
    urlRoot: App.baseURL + 'api/product/load/'
});

App.Models.Product = Backbone.Model.extend({
	url: App.baseURL + 'api/product/load/' + App.product_id,
	defaults: {
		product: App.product_id
	}
});

App.Models.ProductAttribute = Backbone.Model.extend({
	defaults: {
		id: '0000',
		title: 'No attributes',
		options: [],
		selected_option: '0',
		selected: ''
	},
	initialize: function(){
		this.set('order', parseInt(this.get('order')));
        this.productOptions = new App.Collections.ProductOptions();
        this.productOptions.parent = this;
    },
	
    testSize: function(length, width){
    	var length = parseInt(length);
    	var width = parseInt(width);
    	var that = this;
    	var match = false;

    	_.each(that.get('rectangle_sizes'), function(item){
    		
    		//Handle a match
    		if(width >= parseInt(item.min_width) && width <= parseInt(item.max_width) && length >= parseInt(item.min_length) && length <= parseInt(item.max_length)){
    			match = true;
    			return true;
    		}

    	});

		//Handle no matches found
		if(match === false) {
			return false;
		}    	
    },
    calculateSizePrice: function(length, width){
		//flip our switch
		switchView = 1;
    	//This is where complex price calculations go
    	var length = parseInt(length);
    	var width = parseInt(width);
    	var match = false;

    	var that = this;

    	_.each(that.get('rectangle_sizes'), function(item){
	
			//if the table is thick, then do this
			if(selectedID == 726 || selectedID == 688 || selectedID == 698 || selectedID == 1168 || selectedID == 1184 || selectedID == 1195){
				//Handle a match, but take the price value from price2
	    		if(width >= parseInt(item.min_width) && width <= parseInt(item.max_width) && length >= parseInt(item.min_length) && length <= parseInt(item.max_length)){
	    			//we are taking the price from price2 because this is the thick top
					var price = parseInt(item.price2);
	    			that.set('price', price);
					//global variable for our size price
					sizePrice = price;
	    			match = true;
	    		}
				//Handle no matches found
				if(match === false) {
					that.set('price', 0);
					//global variable for our size price
					sizePrice = price;
				}
			}
			//else, do this
			else{
				//Handle a match
	    		if(width >= parseInt(item.min_width) && width <= parseInt(item.max_width) && length >= parseInt(item.min_length) && length <= parseInt(item.max_length)){
	    			var price = parseInt(item.price);
	    			that.set('price', price);
					//global variable for our size price
					sizePrice = price;
	    			match = true;
	    		}	
				//Handle no matches found
				if(match === false) {
					that.set('price', 0);
					//global variable for our size price
					sizePrice = price;
				}
			}

    	});

    },
    testLength: function(width, length){
    	var length = parseInt(length);
    	var width = parseInt(width);
    	var that = this;
    	var max_length = 0;
    	var min_length = 0;
    	var match = false;

    	_.each(that.get('rectangle_sizes'), function(item){
    		
    		//Handle a match
    		if(width >= parseInt(item.min_width) && width <= parseInt(item.max_width) && length >= parseInt(item.min_length) && length <= parseInt(item.max_length)){
    			match = true;
    		}
    		//Store max length
    		if(item.max_length > max_length){
    			max_length = item.max_length;
    		}
    		//Store max length
    		if(item.max_length > max_length){
    			max_length = item.max_length;
    		}
    	});

		//Handle no matches found
		if(match === false) {
			if(length > max_length){
				return max_length;
			}
    		else if(length < min_length){
    			return min_length;
    		} else {
    			return length;
    		}
		} else {
			//false in this case means that the test passes
			return false;
		}

    },
    testWidth: function(width, length){
    	var length = parseInt(length);
    	var width = parseInt(width);
    	var that = this;
    	var max_width = 0;
    	var min_width = 0;
    	var match = false;

    	_.each(that.get('rectangle_sizes'), function(item){
    		
    		//Handle a match
    		if(width >= parseInt(item.min_width) && width <= parseInt(item.max_width) && length >= parseInt(item.min_length) && length <= parseInt(item.max_length)){
    			match = true;
    		}
    		//Store max width
    		if(item.max_width > max_width){
    			max_width = item.max_width;
    		}
      		//Store min width
    		if(item.min_width < min_width){
    			min_width = item.min_width;
    		}
    	});

		//Handle no matches found
		if(match === false) {
			if(width > max_width){
				return max_width;
			}
    		else if(width < min_width){
    			return min_width;
    		} else {
    			return width;
    		}
		} else {
			//false in this case means that the test passes
			return false;
		}

    },
});

App.Models.ProductOption = Backbone.Model.extend({
	defaults: {
		id: '0000',
		title: 'No options',
		selected_option: '0',
		selected: '',
		image_file: 'sample.png',
		options: []
	},
	testRules: function(){
		var that = this;
		var excluded = 0;
	 	App.customization.get('options').each(function(option){
	 		//console.log(option.get('exclude'));
 			if(option.get('exclude') !== null){
 				console.log(option.get('name'));
	 			var exclusions = option.get('exclude').split('&');
	 			// if(_.contains(exclusions, that.get('id')) && parseInt(that.get('attribute')) > parseInt(option.get('attribute'))){
	 			if(_.contains(exclusions, that.get('id'))){
	 				console.log(that.get('name') + ' is excluded');
	 				excluded = 1;
	 				var oldList = that.get('excluded_from');
	 				
	 				that.set('excluded_from', oldList + ', ' + option.get('id'));
	 			}
	 		}
 		});
 		that.set('excluded', excluded);
 		return that;
	},
	initialize: function(){
		this.set('order', parseInt(this.get('order')));
		//productExtras rather than options so that we can access "size", which is the real pricing model for the table
        this.productOptions = new App.Collections.ProductOptions();
        this.productOptions.parent = this;
    },
    calculateSizePrice: function(length, width){
	switchView = 2;
		console.log("Enter CSP");
    	//This is where complex price calculations go
    	var length = parseInt(length);
    	var width = parseInt(width);
    	var match = false;

    	var that = this;

    	_.each(App.selectedAttribute.get('rectangle_sizes'), function(item){
//			console.log("Enter each!");

	
			//if the table is thick, then do this
			if(selectedID == 726 || selectedID == 688 || selectedID == 698 || selectedID == 1168 || selectedID == 1184 || selectedID == 1195){
				console.log("Enter 726");
				//Handle a match, but take the price value from price2
	    		if(width >= parseInt(item.min_width) && width <= parseInt(item.max_width) && length >= parseInt(item.min_length) && length <= parseInt(item.max_length)){
	    			//if it's thick, we add on the extra cost
					var price = parseInt(item.price2) - sizePrice;
	    			that.set('price', price);
	    			match = true;
	    		}
				//Handle no matches found
				if(match === false) {
					that.set('price', 0);
				}
			}
			//else, do this
			else{
				//Handle a match
//				console.log("Enter else");
	    		if(width >= parseInt(item.min_width) && width <= parseInt(item.max_width) && length >= parseInt(item.min_length) && length <= parseInt(item.max_length)){
					//console.log("Match found!" + item.price+ " "+sizePrice);
	    			var price = parseInt(item.price) - sizePrice;
					//if it's thin, we don't need to add any more!
					//var price = 0;
	    			that.set('price', price);
	    			match = true;
	    		}	
				//Handle no matches found
				if(match === false) {
					that.set('price', 0);
				}
			}

    	});
	}
});

App.Models.ProductExtra = Backbone.Model.extend({
	defaults: {
		id: '0000',
		title: 'No attributes',
		options: [],
		selected_option: '0',
		selected: '',
		type: '',
		price: 0,
		index: 0,
		length: 0,
		width: 0
	},
	initialize: function(){
		this.set('order', parseInt(this.get('order')));
        this.productExtrasOptions = new App.Collections.ProductExtrasOptions();
        this.productExtrasOptions.parent = this;
    },
    calculateSizePrice: function(length, width){
    	//This is where complex price calculations go
    	var length = parseInt(length);
    	var width = parseInt(width);

    }
});

App.Models.ProductExtrasOptionStandard = Backbone.Model.extend({
	defaults: {
		id: '0000',
		title: 'No options',
		selected_option: '0',
		selected: '',
		preview_image: 'sample.png',
		price: 0
	},
	testRules: function(){
 		return this;
	}
});

App.Models.ProductExtrasOptionSize = Backbone.Model.extend({
	defaults: {
		id: '0000',
		title: 'No options',
		selected_option: '0',
		selected: '',
		preview_image: 'sample.png',
		price: 0
	},
	testRules: function(){
 		return this;
	}
});

App.Models.ProductExtrasOptionQuantity = Backbone.Model.extend({
	defaults: {
		id: '0000',
		title: 'No options',
		selected_option: '0',
		selected: '',
		preview_image: 'sample.png',
		price: 0
	},
	testRules: function(){
 		return this;
	}
});

App.Models.ProductOptions = Backbone.Model.extend({
	url: 'canvas/customization'
});

App.Models.Customization = Backbone.Model.extend({
	url: App.baseURL + 'api/product/customization/' + App.product_id + '/' + App.customization_id,
	currentPrice: function(){
		//Start with the standard price
		var price = parseInt(App.product.get('standard_price'));
		console.log("standard price = " + price);

		//Add the customization option prices
		this.get('options').each(function(item){
			if((switchView == 1) && (item.get('id') == 725 || item.get('id') == 726 || item.get('id') == 687 || item.get('id') == 688 || item.get('id') == 697 || item.get('id') == 698 || item.get('id') == 1167 || item.get('id') == 1168 ||  item.get('id') == 1184 || item.get('id') == 1196 || item.get('id') == 1195)){
				price = price;
				//	console.log('TOP '+item.get('id'));
			}
			else{
				price = price + parseInt(item.get('price'));
				//console.log('no top, '+item.get('id')+" "+price);
			}
			
			//console.log(item.get('id') + " now = " + parseInt(item.get('price')));
		});

		//Add the extras prices
		this.get('extras').each(function(item){
			if(App.product.get('account').id == '54'){
				price = price + parseInt(item.get('price'));
				console.log(item.get('id') + "and now = " + parseInt(item.get('price')));
			}
			else{
				price = price + parseInt(item.get('price'));
				console.log(item.get('id') + "and now = " + parseInt(item.get('price')));
			}
		});

		return price;
	}
});

App.Models.SelectedOptions = Backbone.Model.extend({
	url: App.baseURL + 'api/product/customization/' + App.product_id,
	currentPrice: function(){
		var price = parseInt(App.product.get('standard_price'));
		_.each(this.attributes, function(item){
			price = price + parseInt(item.price);
		});
		return price;
	},
	defaults: {
		price: 0
	}
});

App.Models.ReferenceImage = Backbone.Model.extend({
});

/*-------------------------------------------------------------------------------------------------------------/
----------------------------------------------- COLLECTIONS ----------------------------------------------------
--------------------------------------------------------------------------------------------------------------*/

// A List of Attributes
App.Collections.ProductAttributes = Backbone.Collection.extend({
	url: 'product/',
	model: App.Models.ProductAttribute,
	comparator: function(model) {
  		return parseInt(model.get("order"));
	}
});
 
 // A List of Extras
App.Collections.ProductExtras = Backbone.Collection.extend({
	url: 'product/extras',
	model: App.Models.ProductExtra,
	comparator: function(model) {
  		return parseInt(model.get("order"));
	}
});

// A List of Options
App.Collections.ProductOptions = Backbone.Collection.extend({
	model: App.Models.ProductOption,
	comparator: function(model) {
  		return parseInt(model.get("order"));
	}
});

// A List of Extras Options
App.Collections.ProductExtrasOptions = Backbone.Collection.extend({
	model: App.Models.ProductExtrasOption,
	comparator: function(model) {
  		return parseInt(model.get("order"));
	}
});


// A List of Selected Options
App.Collections.SelectedOptions = Backbone.Collection.extend({
	model: App.Models.ProductOption
});

// A List of Selected Extras
App.Collections.SelectedExtras = Backbone.Collection.extend({
	model: App.Models.ProductExtra
});


/*-------------------------------------------------------------------------------------------------------------/
----------------------------------------------- VIEWS ---------------------------------------------------------
--------------------------------------------------------------------------------------------------------------*/

/*====================================== PRODUCT ATTRIBUTES ====================================*/

/*---------------------- MANY PRODUCT ATTRIBUTES VIEW ------------------------------*/

App.Views.ProductAttributes = Backbone.View.extend({
	tagName: 'ul',

	initialize: function() {
		//this.collection.on('add', this.addOne, this);
		this.render();
	},

	render: function(){
		return this;
	},

	addOne: function(list){
		var productAttribute = new App.Models.ProductAttribute({ id: this.id, title: this.title, options: this.options });
		var productAttributeView = new App.Views.ProductAttribute({ model: productAttribute, el: list.jQuery('li') });
		//jQuery(list.el).append(productAttributeView.render().el);
	}
});

/*-------------------------------- ATTRIBUTE MENU VIEW ------------------------------*/

App.Views.AttributeMenuView = Backbone.View.extend({
	tagName: 'ul',

	initialize: function() {
		//this.collection.on('add', this.addOne, this);
		var that = this;
		var order = 1;
		this.collection.each(function(item){
			item.set('order', order);
			var productAttributeView = new App.Views.ProductAttribute({ model: item });
			that.$el.append(productAttributeView.render().el);
			order++;
		});
		this.render();
	},

	render: function(){
		return this;
	}
});

/*---------------------- ONE PRODUCT ATTRIBUTE VIEW ------------------------------*/

App.Views.ProductAttribute = Backbone.View.extend({
	tagName: 'li',
 	
 	className: 'leftProductAttribute',

	template: template('productAttributeTemplate'),
 	
 	initialize: function(){
 		//this.on('change', this.updateImage, this);
	},

 	events: {
 		'click' : 'showOptions'
 	},

 	showOptions: function(){
 		
 		App.selectedAttribute.set(this.model.attributes);
		
		//Style both the extras and attributes
 		this.$el.siblings('li').removeClass('selected');
 		this.$el.parent('ul').siblings('ul').find('li').removeClass('selected');
 		this.$el.addClass('selected');
 		this.trigger('change');
 		
 	},

	render: function() {

		this.$el.attr('id', this.model.get('id'));
		this.$el.html( this.template(this.model.toJSON()) );

		return this;
	},

	updateImage: function(option){

		return this;
	}
});

/*---------------------- MANY SELECTED OPTIONS VIEW ------------------------------*/


App.Views.SelectedOptions = Backbone.View.extend({
	tagName: 'ul',

	initialize: function(){
		this.listenTo(App.customization.get('options'), 'change', this.render);
	},

	render: function(){

		//I know this is breaking the DOM rule, but this for now is fine to load and place hotspots
        // jQuery('.attribute_hotspot').fadeOut();
        jQuery('.att' + App.selectedAttribute.get('id')).fadeIn();

        return this;
	},

	update: function(){
		alert('update');
	}
});

/*---------------------- MANY OPTIONS VIEW ------------------------------*/

App.Views.ProductOptions = Backbone.View.extend({

	className: 'left-options-panel',

	template: template('productOptionsTemplate'),

	initialize: function(){
		this.listenTo(App.selectedAttribute, 'change', this.destroy);
	},

	render: function(){ 
		//console.log('[ render options ]');
		this.$el.append(this.template(App.selectedAttribute.toJSON()));

		var options = new Array();
		_.each(App.selectedAttribute.get('options'), function (item) {
			var optionModel = new App.Models.ProductOption(item);
	    	var optionView = new App.Views.ProductOption({ model: optionModel });
	    	this.$el.append(optionView.render().el);
        }, this);
		return this;
	},

	destroy: function(){
	    //COMPLETELY UNBIND THE VIEW
	    this.undelegateEvents();
	    this.$el.removeData().unbind(); 

	    //Remove view from DOM
	    this.remove();  

	}
	

});

/*---------------------- ONE OPTION VIEW ------------------------------*/


App.Views.ProductOption = Backbone.View.extend({
	className: 'optionWrapper',
 	
	template: template('productOptionTemplate'),
 	
 	initialize: function(){
 		
 		this.$el.removeClass('excluded');

	},

	render: function() {

		this.model.testRules();
		//failed attempt at loading gif
		//this.$el.attr('onclick', 'jQuery(var _waitClone = jQuery(\'.wait-layer\').clone(); jQuery(\'#preview-base\').prepend(_waitClone); jQuery(\'#preview-base .wait-layer\').show();');
		this.$el.attr('id', this.model.get('id'));

		if(this.model.get('excluded') == 1){
			this.$el.addClass('excluded');
		}

		this.$el.hover(function(item){
			jQuery(this).find('.exclusion_tooltip').css({
				width: jQuery(this).css('width'),
				height: jQuery(this).css('height')
			});
			jQuery(this).find('.exclusion_tooltip').stop().fadeIn();
		}, function(){
			jQuery(this).find('.exclusion_tooltip').stop().fadeOut();
		});

		this.$el.html( this.template( this.model.toJSON() ));

		return this;
	},

 	events: {
 		'click' : 'updatePreview',
 		'mouseover' : 'showTooltip',
 		'mouseout' : 'hideTooltip'
 	},

 	updatePreview: function(ev){
 		if(this.model.get('excluded') == 1){
 			console.log('Excluded: ' + this.model.get('excluded'));
 		} else {
 			console.log('index: ', this.model.get('attribute_data')['order']);
 			this.attributeModel = new App.Models.ProductAttribute(this.model.get('attribute_data'));
	 		var index = parseInt(this.attributeModel.get('order')) - 1;
			this.$el.siblings('.optionWrapper').removeClass('selected');
	 		this.$el.addClass('selected');
	
			//these next few lines help us determine the price based on table thickness selected
			//preSelectedID is used to determine if it's an option we care about. if it's not 725 or 726, which deal with table thickness, then we don't care
			preSelectedID = this.$el.attr('id');
			if(preSelectedID == 725)
				selectedID = 725;
			else if(preSelectedID == 726)
				selectedID = 726;
				
			else if(preSelectedID == 687)
				selectedID = 687;
			else if(preSelectedID == 688)
				selectedID = 688;
				
			else if(preSelectedID == 697)
				selectedID = 697;
			else if(preSelectedID == 698)
				selectedID = 698;
				
			else if(preSelectedID == 1168)
				selectedID = 1168;
			else if(preSelectedID == 1169)
				selectedID = 1169;
				
			else if(preSelectedID == 1184)
				selectedID = 1184;
			else if(preSelectedID == 1185)
				selectedID = 1185;
				
			else if(preSelectedID == 1195)
				selectedID = 1195;
			else if(preSelectedID == 1196)
				selectedID = 1196;
				
			//now recalculate price based on size in case of table thickness
			//MMU addition this reads to see if we have the preview-size-box numbers stored (in canvas_footer.php)
			if(selectedID==preSelectedID){
				var length = jQuery( ".thickness-length" ).val();	
				var width = jQuery( ".thickness-width" ).val();
				console.log("Attempting to update price "+preSelectedID + " "+selectedID);
				this.model.calculateSizePrice(length, width);
			}


			//end MMU addition
	


	 		//Add this option to the customization model.
	 		console.log(App.customization.get('options'), index);
	 		App.customization.get('options').at(index).set(this.model.attributes);
 		}
 	},

 	alertme: function(){
 		alert('changed');
 	},

 	showTooltip: function(){
 		// var pos = this.$el.position();
 		// this.$el.find('.ui-tooltip').css({
 		// 								top: pos.top + 50,
 		// 								left: pos.left+200
 		// 							})
 		// 							.fadeIn('fast');
 	},

 	hideTooltip: function(){
 		// this.$el.find('.ui-tooltip').stop().fadeOut();
 	}

});

/*====================================== END ATTRIBUTES ====================================*/

/*====================================== PRODUCT EXTRAS ====================================*/

/*-------------------------------- EXTRAS MENU VIEW ------------------------------*/

App.Views.ExtrasMenuView = Backbone.View.extend({
	tagName: 'ul',

	initialize: function() {
		//this.collection.on('add', this.addOne, this);
		var that = this;
		var order = 1;
		App.extrasCollection.each(function(item){
			item.set('order', order);
			var productExtraView = new App.Views.ProductExtra({ model: item });
			that.$el.append(productExtraView.render().el);
			order++;
		});
		this.render();
	},

	render: function(){
		return this;
	}
});

/*---------------------- ONE PRODUCT EXTRA VIEW ------------------------------*/

App.Views.ProductExtra = Backbone.View.extend({
	tagName: 'li',
 	
 	className: 'leftProductExtra',

	template: template('productExtraTemplate'),
 	
 	initialize: function(){
 		//this.on('change', this.updateImage, this);
	},

 	events: {
 		'click' : 'showOptions'
 	},

 	showOptions: function(){

 		var index = this.model.attributes.order - 1;
 		console.log(App.customization.get('extras').at(index).get('value'));
 		App.selectedAttribute.set(App.customization.get('extras').at(index).attributes);

		//Style both the extras and attributes
 		this.$el.siblings('li').removeClass('selected');
 		this.$el.parent('ul').siblings('ul').find('li').removeClass('selected');
 		this.$el.addClass('selected');
 		this.trigger('change');
 		
 	},

	render: function() {

		this.$el.attr('id', this.model.get('id'));
		this.$el.html( this.template(this.model.toJSON()) );

		return this;
	},

	updateImage: function(option){

		return this;
	}
});

/*-------------------------------- EXTRA PANEL VIEWS ------------------------------------*/

/*--------------------- EXTRA STANDARD VIEW ---------------------------*/

App.Views.ProductExtraStandard = Backbone.View.extend({

	className: 'left-options-panel',

	template: template('productExtraStandardTemplate'),

	initialize: function(){
		// this.listenTo(App.selectedAttribute, 'change', this.destroy);
	},

	render: function(){ 
		//console.log('[ render options ]');

		this.$el.append(this.template(App.selectedAttribute.toJSON()));

		var that = this;

		_.each(this.model.get('options'), function(item){
			var selected = '';
			if(item.name == that.model.get('value')){
				var selected = 'selected';
			}
			that.$el.find('.extra_standard').append('<option value="' + item.name + '&' + item.price + '" ' + selected + '>' + item.name + '</option>');
		});

		this.select();

		return this;
	},

	events: {
		'change .extra_standard' : 'select'
	},

	destroy: function(){
	    //COMPLETELY UNBIND THE VIEW
	    this.undelegateEvents();
	    this.$el.removeData().unbind(); 

	    //Remove view from DOM
	    this.remove();  

	},
	
	select: function(){
		var value = this.$el.find('.extra_standard').val();
		var price = value.substring(value.indexOf('&') + 1);
		var name = value.substring(0, value.indexOf('&'));
		this.$el.find('.standard_price_preview').text('$' + price);

		this.model.set('price', price);
		this.model.set('value', value);

		var index = parseInt(this.model.get('order')) - 1;
		
		App.extrasCollection.at(index).set({ 'price' : price, 'value' : name });

		App.customization.get('extras').at(index).set({ 'price' : price, 'value' : name });
		App.customization.get('extras').trigger('change');	
		console.log(App.customization.get('extras').at(index).get('value'));	
	}

});

/*--------------------- EXTRA TEXT VIEW ---------------------------*/

App.Views.ProductExtraText = Backbone.View.extend({

	className: 'left-options-panel',

	template: template('productExtraTextTemplate'),

	initialize: function(){
		// this.listenTo(App.selectedAttribute, 'change', this.destroy);
	},

	render: function(){ 
		//console.log('[ render options ]');

		this.$el.append(this.template(App.selectedAttribute.toJSON()));
		this.toggle();

		var that = this;

		return this;
	},

	events: {
		'change .extra_text_toggle' : 'toggle',
		'click .extra_text_text' : 'editText',
		'click .save_extra_text' : 'saveText',
		'keypress .extra_text' : 'maxText'
	},

	toggle: function() {
		console.log(this.model);
		var status = this.$el.find('.extra_text_toggle').val();
		var value = this.$el.find('.extra_text_wrapper input').val();

		if(status == 1){
			this.$el.find('.extra_text_wrapper').show();
			this.model.set('price', this.model.get('default_price'));
			this.model.set('value', value);
			this.$el.find('.standard_price_preview').text('$' + this.model.get('default_price'));
		} else {
			this.$el.find('.extra_text_wrapper').hide();
			this.$el.find('.extra_text_wrapper input').val('');
			this.model.set('price', 0);
			this.model.set('value', '');
			this.$el.find('.standard_price_preview').text('$0');
			var index = parseInt(this.model.get('order')) - 1;
			
			App.extrasCollection.at(index).set({ 'price' : 0, 'value' : '' });

			App.customization.get('extras').at(index).set({ 'price' : 0, 'value' : '' });
			App.customization.get('extras').trigger('change');	
		}
	},

	editText: function(){
		this.$el.find('.extra_text_text').hide();
		this.$el.find('.extra_text, .save_extra_text').show();
	},

	saveText: function(){
		var value = this.$el.find('.extra_text').val();
		this.$el.find('.extra_text_text').text(value).show();
		this.$el.find('.extra_text, .save_extra_text').hide();
		this.model.set('value', value);
		var index = parseInt(this.model.get('order')) - 1;
		
		App.extrasCollection.at(index).set({ 'price' : this.model.get('default_price'), 'value' : value });

		App.customization.get('extras').at(index).set({ 'price' : this.model.get('default_price'), 'value' : value });
		App.customization.get('extras').trigger('change');	
	},

	maxText: function(){
		var text = this.$el.find('.extra_text').val();
		var maxChar = parseInt(this.model.get('maxchar'));
		console.log(maxChar, text);
		if(text.length > maxChar){
			this.$el.find('.extra_text').val(text.substring(0, 14));
		}
	},

	destroy: function(){
	    //COMPLETELY UNBIND THE VIEW
	    this.undelegateEvents();
	    this.$el.removeData().unbind(); 

	    //Remove view from DOM
	    this.remove();  

	}

});

/*--------------------- EXTRA FILE VIEW ---------------------------*/

App.Views.ProductExtraFile = Backbone.View.extend({

	className: 'left-options-panel',

	template: template('productExtraFileTemplate'),

	// initialize: function(){
	// 	// this.listenTo(App.selectedAttribute, 'change', this.destroy);
	// },

	render: function(){ 
		this.$el.append(this.template(App.selectedAttribute.toJSON()));
		var self = this;
		var $bar = this.$el.find('.bar');
		this.$el.find('.fileupload').fileupload({
			url: '/index.php/canvas/upload',
	        dataType: 'json',
	        done: function (e, data) {
	        	self.model.set('value', data.id);
	        	$bar.text('Logo upload complete!');
	        	console.log('done');
	        },
	        always: function (e, data) {
	        	console.log("AAA");
	        },
	        fail: function (e, data) {
	        },
	        progressall: function (e, data) {
	            var progress = parseInt(data.loaded / data.total * 100, 10);
	            $bar.css(
	                'width',
	                progress + '%'
	            );
	        }
		});


		return this;
	}

	// events: {
	// 	'change .extra_text_toggle' : 'toggle',
	// 	'click .extra_text_text' : 'editText',
	// 	'click .save_extra_text' : 'saveText',
	// 	'keypress .extra_text' : 'maxText'
	// },

	// toggle: function() {
	// 	console.log(this.model);
	// 	var status = this.$el.find('.extra_text_toggle').val();
	// 	var value = this.$el.find('.extra_text_wrapper input').val();

	// 	if(status == 1){
	// 		this.$el.find('.extra_text_wrapper').show();
	// 		this.model.set('price', this.model.get('default_price'));
	// 		this.model.set('value', value);
	// 		this.$el.find('.standard_price_preview').text('$' + this.model.get('default_price'));
	// 	} else {
	// 		this.$el.find('.extra_text_wrapper').hide();
	// 		this.$el.find('.extra_text_wrapper input').val('');
	// 		this.model.set('price', 0);
	// 		this.model.set('value', '');
	// 		this.$el.find('.standard_price_preview').text('$0');
	// 		var index = parseInt(this.model.get('order')) - 1;
			
	// 		App.extrasCollection.at(index).set({ 'price' : 0, 'value' : '' });

	// 		App.customization.get('extras').at(index).set({ 'price' : 0, 'value' : '' });
	// 		App.customization.get('extras').trigger('change');	
	// 	}
	// },

	// editText: function(){
	// 	this.$el.find('.extra_text_text').hide();
	// 	this.$el.find('.extra_text, .save_extra_text').show();
	// },

	// saveText: function(){
	// 	var value = this.$el.find('.extra_text').val();
	// 	this.$el.find('.extra_text_text').text(value).show();
	// 	this.$el.find('.extra_text, .save_extra_text').hide();
	// 	this.model.set('value', value);
	// 	var index = parseInt(this.model.get('order')) - 1;
		
	// 	App.extrasCollection.at(index).set({ 'price' : this.model.get('default_price'), 'value' : value });

	// 	App.customization.get('extras').at(index).set({ 'price' : this.model.get('default_price'), 'value' : value });
	// 	App.customization.get('extras').trigger('change');	
	// },

	// maxText: function(){
	// 	var text = this.$el.find('.extra_text').val();
	// 	var maxChar = parseInt(this.model.get('maxchar'));
	// 	console.log(maxChar, text);
	// 	if(text.length > maxChar){
	// 		this.$el.find('.extra_text').val(text.substring(0, 14));
	// 	}
	// },

	// destroy: function(){
	//     //COMPLETELY UNBIND THE VIEW
	//     this.undelegateEvents();
	//     this.$el.removeData().unbind(); 

	//     //Remove view from DOM
	//     this.remove();  

	// }

});

/*--------------------- EXTRA SIZE VIEW ---------------------------*/

App.Views.ProductExtraSize = Backbone.View.extend({

	className: 'left-options-panel',

	template: template('productExtraSizeTemplate'),

	initialize: function(){

	},

	render: function(){ 
		//console.log('[ render options size ]');
		
		//set sizeview to true because they have entered this view
		sizeView = true;

		this.$el.append(this.template(App.selectedAttribute.toJSON()));

		var minL = parseInt(this.model.get('min_length'));
		var maxL = parseInt(this.model.get('max_length'));
		var minW = parseInt(this.model.get('min_width'));
		var maxW = parseInt(this.model.get('max_width'));
		var defW = parseInt(this.model.get('width'));
		var defL = parseInt(this.model.get('length'));

		var myL = parseInt(jQuery( ".thickness-length" ).val());
		var myW = parseInt(jQuery( ".thickness-width" ).val());

		if(isNaN(myW))myW=defW;
		if(isNaN(myL))myL=defL;
		//MMU addition this reads to see if we have the preview-size-box numbers stored (in canvas_footer.php)
		var new_length = jQuery( ".length-hidden" ).val();
        this.$el.find( "#size_box_preview").css('height', new_length);
		var new_width = jQuery( ".width-hidden" ).val();
        this.$el.find( "#size_box_preview").css('width', new_width);
		//end MMU addition
		
		this.$el.find( "#length_slider" ).slider({
	      orientation: "vertical",
	      range: "min",
	      min: minL,
	      max: maxL,
	      value: 100 - myL,
	      slide: function( event, ui ) {
	      	//reverse the size top to bottom
	      	var newL = maxL+minL - ui.value;

	        jQuery( ".length" ).val( newL );
			jQuery( ".thickness-length" ).val( newL );

	        //To get preview height then multiply value by the wrapper height/max value
	        var wrapperHeight = parseInt(jQuery( "#size_box_preview_wrapper").css("height"));
	        var preview_size = newL*(wrapperHeight/99);
	        jQuery( "#size_box_preview").css('height', preview_size);
			jQuery( ".length-hidden" ).val(preview_size);
	      }
	    });

	    var newlength = 100 - parseInt(this.$el.find( "#length_slider" ).slider( "value" ));
	    this.$el.find( ".length" ).val( newlength );
		this.$el.find( ".thickness-length" ).val( newlength );

		
		this.$el.find( "#width_slider" ).slider({
	      range: "min",
	      min: minW,
	      max: maxW,
	      value: myW,
	      slide: function( event, ui ) {
	        jQuery( ".width" ).val( ui.value );
			jQuery( ".thickness-width" ).val( ui.value );

	        //To get preview width multiply value by the wrapper width/max value
	        var wrapperWidth = parseInt(jQuery( "#size_box_preview_wrapper").css("width"));
	        var preview_size = ui.value*(wrapperWidth/48);
	        jQuery( "#size_box_preview").css('width', preview_size);
			jQuery( ".width-hidden" ).val(preview_size);
	      }
	    });
	    
		var newWidth = parseInt(this.$el.find( "#width_slider" ).slider( "value" ))
		this.$el.find( ".width" ).val(newWidth);
		this.$el.find( ".thickness-width" ).val(newWidth);
	

      //To get preview height then multiply value by the wrapper height/max value
        var wrapperHeight = parseInt(jQuery( "#size_box_preview_wrapper").css("height"));
        var preview_size = newlength*(wrapperHeight/99);
        this.$el.find( "#size_box_preview").css('height', preview_size);

        //To get preview width multiply value by the wrapper width/max value
        var wrapperWidth = parseInt(jQuery( "#size_box_preview_wrapper").css("width"));
        var preview_size = defW*(wrapperWidth/48);
        this.$el.find( "#size_box_preview").css('width', preview_size);

		this.setSize();
		
		return this;

	},

	events: {
		'mouseout' : 'setSize', 
		'load'	: 'setSize'
	},

	setSize: function(){
		var length = this.$el.find('.length').val();
		var width = this.$el.find('.width').val();
		var value = length + '" L X ' + width + '" W';

		var valid = false;

		var pass = this.model.testSize(length, width);

		if(pass === false){
			jQuery( "#size_box_preview").addClass('invalid');
			console.log("This is not a valid size.");
			this.$el.find('#size_price_preview').hide();
			this.$el.find('.not_valid_size').show();
		}

		else {
			console.log('valid');
			jQuery( "#size_box_preview").removeClass("invalid");
			this.$el.find('.not_valid_size').hide();
			this.$el.find('#size_price_preview').show();
			this.model.calculateSizePrice(length, width);
			this.$el.find('#size_price_preview').text('$' + this.model.get('price'));
		}

		var index = parseInt(this.model.get('order'))-1;
		
		App.extrasCollection.at(index).set({ 'price' : this.model.get('price'), 'value' : this.model.get('value'), 'length' : length, 'width' : width });

		App.customization.get('extras').at(index).set({ 'price' : this.model.get('price'), 'value' : value, 'length' : length, 'width' : width });
		App.customization.get('extras').trigger('change');
	},

	destroy: function(){
	    //COMPLETELY UNBIND THE VIEW
	    this.undelegateEvents();
	    this.$el.removeData().unbind(); 

	    //Remove view from DOM
	    this.remove();  

	}
	

});

/*--------------------- EXTRA QUANTITY VIEW ---------------------------*/

App.Views.ProductExtraQuantity = Backbone.View.extend({

	className: 'left-options-panel',

	template: template('productExtraQuantityTemplate'),

	initialize: function(){
		this.listenTo(App.selectedAttribute, 'change', this.destroy);
	},

	render: function(){ 
		//console.log('[ render options ]');

		this.$el.append(this.template(App.selectedAttribute.toJSON()));

		return this;
	},

	destroy: function(){
	    //COMPLETELY UNBIND THE VIEW
	    this.undelegateEvents();
	    this.$el.removeData().unbind(); 

	    //Remove view from DOM
	    this.remove();  

	}
	

});
/*--------------------- EXTRA EQuietch VIEW ---------------------------*/

App.Views.ProductExtraEquiletter = Backbone.View.extend({

	className: 'left-options-panel',

	template: template('productExtraEquiletterTemplate'),

	initialize: function(){

	},

	render: function(){ 
		//console.log('[ render options ]');
		this.$el.append(this.template(App.selectedAttribute.toJSON()));
		this.updateVisible();

		return this;
	},

	events: {
		'change .equiselect':'updateVisible',
		'change input':'updateData'
	},
	updateVisible:function(){
		$eq=jQuery(".equimagic", this.$el);
		if($eq.length){
			$v=jQuery('.equiselect', $eq).val();
			console.log($v=='none');
			jQuery('.location', $eq).css('display', $v==''||$v=='none'?'none': 'block');
			jQuery('.text', $eq).css('display', $v==''|| $v=='none'?'none': 'block');
			jQuery('.lettering', $eq).css('display', $v!='lettering'?'none': 'block');
		}
		this.updateData();
	},

	updateData:function(){

		var a=jQuery('.equiselect', this.$eq).val();
		var b=jQuery('input[name='+this.model.get('id')+'_let]:checked', this.$eq).val();
		var c=jQuery('input[name='+this.model.get('id')+'_loc]:checked', this.$eq).val();
		var e=jQuery('input[name='+this.model.get('id')+'_text]', this.$eq).val();

		a=a?a:'';
		b=b?b:'';
		c=c?c:'';
		e=e?e:'';

		var value= a+" "+b+" "+c+" "+e;

		var index = parseInt(this.model.get('order'))-1;
		
		App.extrasCollection.at(index).set({ 'price' : 0, 'value' : value });

		App.customization.get('extras').at(index).set({ 'price' : 0, 'value' : value });
		App.customization.get('extras').trigger('change');	

   	},

	destroy: function(){
	    //COMPLETELY UNBIND THE VIEW
	    this.undelegateEvents();
	    this.$el.removeData().unbind(); 

	    //Remove view from DOM
	    this.remove();  

	}
	

});


App.Views.ProductExtraEquimono = Backbone.View.extend({

	className: 'left-options-panel',

	template: template('productExtraEquimonoTemplate'),

	initialize: function(){

	},

	render: function(){ 
		//console.log('[ render options ]');
		this.$el.append(this.template(App.selectedAttribute.toJSON()));
		this.updateVisible();

		return this;
	},

	events: {
		'change .equiselect':'updateVisible',
		'change input':'updateData'
	},
	updateVisible:function(){
		$eq=jQuery(".equimagic", this.$el);
		if($eq.length){
			$v=jQuery('.equiselect', $eq).val();
			jQuery('.location', $eq).css('display', $v==''||$v=='none'?'none': 'block');
			jQuery('.monogram', $eq).css('display', $v!='monogram'?'none': 'block');
			jQuery('.text', $eq).css('display', $v==''|| $v=='none'?'none': 'block');
		}
		this.updateData();
	},

	updateData:function(){

		var a=jQuery('.equiselect', this.$eq).val();
		var d=jQuery('input[name='+this.model.get('id')+'_mon]:checked', this.$eq).val();
		var e=jQuery('input[name='+this.model.get('id')+'_text]', this.$eq).val();

		a=a?a:'';
		c='';
		d=d?d:'';
		e=e?e:'';
		var value= a+" "+c+" "+d+" "+e;

		var index = parseInt(this.model.get('order')) - 1;
		
		App.extrasCollection.at(index).set({ 'price' : 0, 'value' : value });
		App.customization.get('extras').at(index).set({ 'price' : 0, 'value' : value });
		App.customization.get('extras').trigger('change');	

   	},

	destroy: function(){
	    //COMPLETELY UNBIND THE VIEW
	    this.undelegateEvents();
	    this.$el.removeData().unbind(); 

	    //Remove view from DOM
	    this.remove();  

	}
	

});

/*---------------------- ONE EXTRAS STANDARD OPTION VIEW ------------------------------*/

App.Views.ProductExtrasOptionStandard = Backbone.View.extend({
	className: 'optionWrapper',
 	
	template: template('productExtrasOptionStandardTemplate'),
 	
 	initialize: function(){
 		
 		this.$el.removeClass('excluded');

	},

	render: function() {

		this.model.testRules();

		this.$el.attr('id', this.model.get('id'));

		if(this.model.get('excluded') == 1){
			this.$el.addClass('excluded');
		}

		this.$el.html( this.template( this.model.toJSON() ));

		return this;
	}

});

/*---------------------- ONE EXTRAS QUANTITY OPTION VIEW ------------------------------*/

App.Views.ProductExtrasOptionQuantity = Backbone.View.extend({
	className: 'optionWrapper',
 	
	template: template('productExtrasOptionQuantityTemplate'),
 	
 	initialize: function(){
 		
 		this.$el.removeClass('excluded');

	},

	render: function() {

		this.model.testRules();

		this.$el.attr('id', this.model.get('id'));

		if(this.model.get('excluded') == 1){
			this.$el.addClass('excluded');
		}

		this.$el.html( this.template( this.model.toJSON() ));

		return this;
	}

});

/*====================================== END EXTRAS ====================================*/

/*----------------------------- FINAL PRODUCT VIEW ------------------------------*/

App.Views.FinalProduct = Backbone.View.extend({
	className: 'finalProduct',
 	
	template: template('finalProductTemplate'),

	initialize: function(){
	},

	render: function(){
		this.$el.html('');

		// var options = new Array();
		// App.customization.get('options').each(function (item) {
	 //    	var selectedOption = new App.Views.SelectedOption({ model: item });
	 //    	this.$el.append(selectedOption.render().el);
  //       }, this);	

        return this;
	},

	update: function(){
		alert('update');
	}
});

/*------------------------------- PRODUCT STAGE VIEW ---------------------------------------*/

App.Views.ProductStage = Backbone.View.extend({

	id: 'preview-base', 

	template: template('productStageTemplate'),

	initialize: function(){
		// var _waitClone = jQuery('.wait-layer').clone();
		// jQuery('#preview-stage').html(_waitClone);
		// jQuery('#preview-stage .wait-layer').show();
		this.listenTo(App.customization.get('options'), 'change', this.render);
		
	},

	render: function(){ 

		var that = this; 

		this.$el.html('');
		
//		console.log("Customization options: ", App.customization.attributes.options);
//		console.log('[ render stage ]');

		var options = new Array();
		var order = 10;
		App.customization.attributes.options.each(function(item) {
			item.set('order', order);
	    	var optionLayer = new App.Views.OptionLayer({ model: item.toJSON() });
	    	this.$el.append(optionLayer.render().el);
	    	order--;
        }, this);

        //Create labels if they are turned out
        if(App.product.get('labels') == 'On'){
	        _.each(App.product.get('attributes'), function(item) {
	        	console.log(item.label_name);
	 	    	var label = new App.Views.AttributeLabel({ model: item });
		    	that.$el.append(label.render().el);
	        });
    	}
		jQuery('#preview-stage').html(this.el);

		return this;
	},
	
 	events: {
 		'click' : 'explainLayer'
 	},

 	explainLayer: function(option){
 		console.log(option);
 	},

 	checkRemove: function(){
 		console.log('check remove');
 	},

 	destroyOption: function(){
 		this.model.destroy(); 
 	},

 	remove: function(){
 		this.$el.remove();
 	}
});

/*---------------------- OPTION LAYER VIEW ------------------------------*/

App.Views.OptionLayer = Backbone.View.extend({
	className: 'option-layer',
 
	template: template('productOptionLayerTemplate'),
 	
 	initialize: function(){
		//this.model.on('change', this.render, this);
		//this.model.on('destroy', this.remove, this);
	},

	render: function() {
		this.$el.css('z-index', this.model.attribute_data.image_order);
		this.$el.html( this.template(this.model) );
		return this;
	}
});

/*---------------------- ATTRIBUTE LABEL VIEW ------------------------------*/

App.Views.AttributeLabel = Backbone.View.extend({

 	className: 'attributeLabel',

  	template: template('attributeLabelTemplate'),

 	initialize: function(){
 		
 		this.render();

 		App.selectedAttribute.on('change', this.render, this);
	},

	render: function() {
		var that = this;

		that.$el.attr('id', that.model.id);
		that.$el.css('display', 'block');

		that.$el.html( that.template(that.model) );

		var mainImagePos = jQuery('#preview-base').offset();
		var canvasPos = jQuery('#canvas_wrapper').position();
		var leftWidth = parseInt(jQuery('#left-primary-panel').css('width')) + parseInt(jQuery('#left-secondary-panel').css('width'));

		var offsetTop;
		var offsetLeft;

		if(canvasPos.left > 1){
			var offsetTop = 75;
			var offsetLeft = canvasPos.left + leftWidth;
		} else {
			var offsetTop = mainImagePos.top;
			var offsetLeft = mainImagePos.left;			
		}

		//position labels if they have been assigned positions
		that.$el.css('position', 'absolute');
		that.$el.css({
			'top' : offsetTop + parseInt(that.model.hotspot_y),
			'left' : offsetLeft + parseInt(that.model.hotspot_x)
		});

		if(App.selectedAttribute.get('id') == that.model.id){
			that.$el.show();
		} else {
			that.$el.hide();
		}

		return that;
	},

	events: {

	}

});

/*---------------------- TOTAL PRICE VIEW ------------------------------*/

App.Views.TotalPrice = Backbone.View.extend({
  	
 	initialize: function(){
		this.listenTo(App.customization.get('options'), 'change', this.render);
		this.listenTo(App.customization.get('extras'), 'change', this.render);
	},

	render: function() {
		var price = this.model.currentPrice();
		App.customization.set('price', price);
		//added by MU for currency option
		var currency = App.product.get('account').currency;
		var outCurrency;
		if (currency == "USD")
			outCurrency = "$";
		else if(currency == "EUR")
			outCurrency = "&euro;";
		this.$el.html(outCurrency + price);
		//end MU
		if((productID == 44 || productID ==  45 || productID ==  46 || productID ==  61 || productID ==  62 || productID ==  63) && (!sizeView)){
			jQuery( "*" ).find("#pleaseSize").hide();
			this.$el.html("<div id=\"pleaseSize1\" style=\"font-size:20px;\">Please choose size.</div>");
			jQuery( "*" ).find("#pleaseSize").siblings().css({'text-indent':'0px', 'margin-top':'0px', 'color':'#333333'});
			return this;
		}
		else{
			jQuery( "*" ).find("#pleaseSize").hide();
			jQuery( "*" ).find("#pleaseSize").siblings().css({'text-indent':'0px', 'margin-top':'0px', 'color':'#333333'});
			jQuery( "*" ).find("#add-to-cart").show();
			return this;
		}
	},

	load: function(price){
		//added by MU for currency option
		var currency = App.product.get('account').currency;
		var outCurrency;
		if (currency == "USD")
			outCurrency = "$";
		else if(currency == "EUR")
			outCurrency = "&euro;";
		this.$el.html(outCurrency + price);
		//end MU
		return this;		
	}
	
	//		$.get('save_preferences/currency/' + newText, function(data){
	//		console.log("[ Successfully saved store currency to: " + data + " ] ");
	//	});
});

/*---------------------- REFERENCE IMAGES VIEW ------------------------------*/

App.Views.ReferenceImages = Backbone.View.extend({

	className: 'reference_images_panel',

	initialize: function(){
	},

	render: function(){
		var that = this;
		_.each(this.model.get('reference_images'), function(item){
			var thumb = new App.Views.ReferenceImageThumb({ model: item });
			that.$el.append(thumb.render().el);
		});
		return that;
	}
});

/*---------------------- REFERENCE THUMBNAIL VIEW ------------------------------*/

App.Views.ReferenceImageThumb = Backbone.View.extend({

	className: "reference_thumb",

	initialize: function(){
	},

	render: function(){
		this.$el.attr('id', this.model.id);
		this.$el.html("<img src='" + App.resourcesURL + "reference_images/" + this.model.file + "'>");
		return this;
	},

	events: {
		'click' : 'selectReference'
	},

	selectReference: function(){
		App.selectedReference.set({ id: this.model.id, file: this.model.file })
	}
});

/*---------------------- REFERENCE IMAGE PREVIEW VIEW ------------------------------*/

App.Views.ReferenceImagePreview = Backbone.View.extend({

	className: "reference_image_preview",

	initialize: function(){
		this.listenTo(App.selectedReference, 'change', this.update);
	},

	render: function(){
		if(this.model.get('reference_images').length > 0){
			var firstThumb = this.model.get('reference_images')[0];
			this.$el.attr('id', firstThumb.id);
			this.$el.html("<img src='" + App.resourcesURL + "reference_images/" + firstThumb.file + "'>");
			return this;
		}
		return this;
	},

	update: function(){
		this.$el.attr('id', App.selectedReference.get('id'));
		this.$el.html("<img src='" + App.resourcesURL + "reference_images/" + App.selectedReference.get('file') + "'>");
		return this;		
	}
});

/*---------------------- MAIN CANVAS VIEW ---------------------------------*/

App.Views.Canvas = Backbone.View.extend({

	el: jQuery("#canvas_wrapper"),

	template: template('canvasTemplate'),

	initialize: function() {
		
		this.render();

		//Create the attributes collection
		this.attributesCollection = new App.Collections.ProductAttributes(this.model.get('attributes'));
		this.attributesCollection.sort();

		//Create the extras collection
		App.extrasCollection = new App.Collections.ProductExtras(this.model.get('extras'));
		App.extrasCollection.sort();

		//Create the product stage
		this.productStage = new App.Views.ProductStage();      
		this.$el.find('#product-stage').html(this.productStage.render().el);

		//Create the left menu
		this.attributeMenuView = new App.Views.AttributeMenuView({ model: this.model, collection: this.attributesCollection })
		this.$el.find("#left-primary-panel").html(this.attributeMenuView.el);

		//Add the extras to the left menu
		this.extrasMenuView = new App.Views.ExtrasMenuView({ model: this.model, collection: App.extrasCollection })
		this.$el.find("#left-primary-panel").append(this.extrasMenuView.el);

		//Create the selection preview
		this.selections = new App.Views.SelectedOptions({ model: App.customization });      
		this.$el.parent().parent().find("#current_selections").html(this.selections.render().el);

		//Create the reference image panel
		this.references = new App.Views.ReferenceImages({ model: this.model });
		this.$el.find('#product_reference_images').append(this.references.render().el);

		//Create the reference image preview
		this.referencePreview = new App.Views.ReferenceImagePreview({ model: this.model });
		this.$el.find('#product_reference_images').append(this.referencePreview.render().el);

		//Update price on load
		var price = App.customization.currentPrice();
		App.customization.set('price', price);

		//Create the current price element
		this.priceView = new App.Views.TotalPrice({ model: App.customization });
		if((productID == 44 || productID ==  45 || productID ==  46 || productID ==  61 || productID ==  62 || productID ==  63) && (!sizeView)){
			this.$el.find("#current-price").html(this.priceView.load(price).el);
			this.$el.find("#current-price").append("<div id=\"pleaseSize\" style=\"font-size:20px;\">Please choose size.</div>");
			this.$el.find("#add-to-cart").hide();
			this.$el.find("#pleaseSize").siblings().css({'text-indent':'-10000px', 'margin-top':'-40px', 'color':'#f7f7f7'});
		}
		else{
			this.$el.find("#current-price").html(this.priceView.load(price).el);
		}

		//Set up shopify form
		jQuery('#shopify_form').attr("action",  (("http:"===document.location.protocol)?"http:":"https:")+"//" +  App.product.get('account').payment_settings.shopify_url  + "/cart/add");
		
	},

	render: function(){
		this.$el.html( this.template(this.model.toJSON()) );
		return this;
	},

    events: {
    	'click .leftProductAttribute' : 'displayOptions',
    	'click .leftProductExtra' : 'displayExtra',
    	'click .add_product_to_cart' : 'addToCart',
    	'click #purchase_product' : 'purchaseProduct',
    	'click #edit_product' : 'editProduct',
    	'click .twitter_share' : 'twitterShare',
    	'click .facebook_share' : 'facebookShare',
    	'click #see-more-views' : 'viewReferenceImages',
    	'click .close_lightbox' : 'closeLightbox'
    },

	displayOptions: function(e){
		var productOptions = new App.Views.ProductOptions();
		jQuery('#left-options-panel').html(productOptions.render().el);
	},

	displayExtra: function(e){

		var type = App.selectedAttribute.get('type');

		if(type == 'standard'){
   			var extra = new App.Views.ProductExtraStandard({ model: App.selectedAttribute });
			jQuery('#left-options-panel').html(extra.render().el);
		}
		else if(type == 'text') {
   			var extra = new App.Views.ProductExtraText({ model: App.selectedAttribute });
			jQuery('#left-options-panel').html(extra.render().el);
		}
		else if(type == 'file') {
   			var extra = new App.Views.ProductExtraFile({ model: App.selectedAttribute });
			jQuery('#left-options-panel').html(extra.render().el);
		}
		else if(type == 'size') {
   			var extra = new App.Views.ProductExtraSize({ model: App.selectedAttribute });
			jQuery('#left-options-panel').html(extra.render().el);
		}
		else if(type == 'quantity') {
   			var extra = new App.Views.ProductExtraQuantity({ model: App.selectedAttribute });
			jQuery('#left-options-panel').html(extra.render().el);
		}
		else if(type == 'equiletter') {
   			var extra = new App.Views.ProductExtraEquiletter({ model: App.selectedAttribute });
			jQuery('#left-options-panel').html(extra.render().el);
		}
		else if(type == 'equimono') {
   			var extra = new App.Views.ProductExtraEquimono({ model: App.selectedAttribute });
			jQuery('#left-options-panel').html(extra.render().el);
		} else {
   			var extra = new App.Views.ProductExtraStandard({ model: App.selectedAttribute });
			jQuery('#left-options-panel').html(extra.render().el);			
		}

	},

	addToCart: function(e){
		
		var finalProduct = new App.Views.FinalProduct({ model: App.customization }); 
		jQuery('#view_final_product').fadeIn();
		jQuery('#cover').fadeIn();
		jQuery('#final_product_details').html(finalProduct.render().el);

		//Disable buttons until customization is done loading
		this.$el.find('#customization_loading').show();
		this.$el.find('#purchase_product').hide();
		this.$el.find('#edit_product').hide();
		that = this;

		//Set the current canvas url to a cookie. This is used when user is redirected from the shopping cart later. 
		document.cookies = "canvas_url=" + document.URL;

		//Save selected option collection to attach to new customization object
		var selectedOptions = App.customization.get('options');

		App.customization.save('saved', 'true', { success: function(data){
			console.log(data);
			App.customization.set('options', selectedOptions);
			console.log('[ customizaton data ]', data);
			selectedExtras = new App.Collections.SelectedExtras(App.customization.get('extras'));
			App.customization.set('extras', selectedExtras);

			jQuery('#preview_customization').html('<img src="' + App.resourcesURL + 'customizations/' + data.get('preview_image') + '">');

			//Create shopify product IF this is a shopify store
			if(App.product.get('account').store_type == 'shopify'){
				$.get(App.baseURL + "canvas/shopify_product/" + App.customization.get('id'), function(data){
					var json = $.parseJSON(data);
					console.log(json);
					console.log("json");
					App.product.set('shopify_id', json.id);
					App.product.set('shopify_variant_id', json.variants[0].id);
					App.product.set('shopify_page', (("http:"===document.location.protocol)?"http:":"https:")+"//" + App.product.get('account').payment_settings.shopify_url + "/products/" + json.handle);
					if(App.product.get('account').id == 93){
						temp = App.product.get('account').payment_settings.shopify_store_url;
						temp = temp.replace("www.",'');
						jQuery('form#shopify_form').attr('action', (("http:"===document.location.protocol)?"http:":"https:")+"//"+ temp + "/cart/add");
					}
					else{
						jQuery('form#shopify_form').attr('action', (("http:"===document.location.protocol)?"http:":"https:")+"//"+ App.product.get('account').payment_settings.shopify_store_url + "/cart/add");
					}
					
					jQuery('input#shopify_id').val(App.product.get('shopify_variant_id'));
					
					that.$el.find('#customization_loading').hide();
					that.$el.find('#purchase_product').show();
					that.$el.find('#edit_product').show();

				});
			}else{
				
				that.$el.find('#customization_loading').hide();
				that.$el.find('#purchase_product').show();
				that.$el.find('#edit_product').show();

			}
	
		}, error: function(data){
			alert('add to cart error');
			console.log(data);
		}});
	},

	purchaseProduct: function(e){
		console.log('[ purchase product ]');
		
		//If Shopify store, add to cart and redirect to cart
		if( (App.product.get('account').magento_url != '') && (App.product.get('account').magento_url != null) )
		{
			location.href = 'http://' + App.product.get('account').magento_url;
		}
		else if(App.product.get('account').store_type == 'shopify' && App.product.get('account').payment_settings.shopify_url !== null){

			//REDIRECT TO SHOPIFY CART
			// location.href = 'http://citizenmade-demo.myshopify.com/cart/add?id[]=' + App.product.get('shopify_id') + '&move_to=/checkout';
	
			jQuery('#shopify_form').submit();
		}
		//Go through standard checkout
		else{
			location.href = App.baseURL + "canvas/buy_now/" + App.customization.get('id');

		}
	},

	editProduct: function(e){
		jQuery('#cover').fadeOut();
		jQuery('.lightbox').fadeOut();
	},

	twitterShare: function(){
		
		//Change this to go to the store URL OR the canvas on citizenmade
		if(App.product.get('account').shared_url == ''){
			url = '';
			url = encodeURIComponent(App.baseURL + 'canvas/index/' + App.product.get('id') + '/' + App.customization.get('id'));			
		} else {
			var url = 'http://'; 
			url += App.product.get('account').shared_url;
			
		}
		window.open('https://twitter.com/share?url=' + url + '&via=CitizenMade&text=Check out my new design from ' + App.product.get('account').name + ':', 'Tweet Customization', '_blank');
	},

	facebookShare: function(){

		var finalProduct = new App.Views.FinalProduct({ model: App.customization }); 

		//Save selected option collection to attach to new customization object
		var selectedOptions = App.customization.get('options');
		App.customization.save('saved', 'true', { success: function(data){
			App.customization.set('options', selectedOptions);
			console.log('[ customizaton data ]', data);

	//		var url = 'http://';
	//		url += App.product.get('account').shared_url;
			
		//	console.log(App.baseURL);
	//		if(App.product.get('account').shared_url == ''){
	//			url = '';
			var 	url = App.baseURL + 'canvas/landing/' + App.customization.get('id') + '/1';
	//		}
			var name = 'Share Your Customization On Facebook';
			var w = 640;
			var h = 680;

			function wopen(url, name, w, h)
			{
			// Fudge factors for window decoration space.
			 // In my tests these work well on all platforms & browsers.
			w += 32;
			h += 96;
			 var win = window.open(url,
			  name, 
			  'width=' + w + ', height=' + h + ', ' +
			  'location=no, menubar=no, ' +
			  'status=no, toolbar=no, scrollbars=no, resizable=no');
			 win.resizeTo(w, h);
			 win.focus();
			}

			wopen(url, name, w, h);

			// window.open(App.baseURL + 'canvas/landing/' + App.customization.get('id'), 'Share You Customization On Facebook', '_blank');
		}, error: function(data){
			alert('add to cart error');
			console.log(data);
		}});

	},

	viewReferenceImages: function(){
		jQuery('#product_reference_images').fadeIn();
		jQuery('#cover').fadeIn();
	},

	closeLightbox: function(){
		jQuery('#cover').fadeOut();
		jQuery('.lightbox').fadeOut();
	}

});

App.Views.Draft = Backbone.View.extend({
	el: jQuery("#canvas_wrapper"),

	template: template('draftTemplate'),

	initialize: function() {
		
		this.render();

	},

	render: function(){
		this.$el.html( this.template(this.model.toJSON()) );
		return this;
	},

    events: {
    }

});

/*-------------------------------------------------------------------------------------------------------------/
------------------------------------ VIEWS TO CREATE ON LOAD --------------------------------------------------
--------------------------------------------------------------------------------------------------------------*/

// App.canvasModel = new App.Models.Canvas(App.canvasData.attributes);
App.product = new App.Models.Product();
console.log(App.product);
App.product.fetch({
	success: function(model, response){
		App.selectedReference = new App.Models.ReferenceImage();
		App.selectedAttribute = new App.Models.ProductAttribute();
		App.selectedOptions = new App.Models.SelectedOptions();
		App.selectedOptions.fetch();

		App.customization = new App.Models.Customization();
		App.customization.fetch({ 
			success: function(){
				selectedOptions = new App.Collections.SelectedOptions(App.customization.get('options'));
				App.customization.set('options', selectedOptions);
				var outputthis = App.customization.set('options', selectedOptions);

				selectedExtras = new App.Collections.SelectedExtras(App.customization.get('extras'));
				App.customization.set('extras', selectedExtras);

				
				if(App.environment == 'local') {
					App.resourcesURL = App.resourcesURL + 'store_' + model.get('account').id + '/';
				}
				else if (App.environment == 'dev') {
					App.resourcesURL = App.resourcesURL + 'store_' + model.get('account').id + '/';
				}
				else {
					App.resourcesURL = (("http:"===document.location.protocol)?"http:":"https:")+"//"+'resources.citizenmade.co/uploads/store_' + model.get('account').id + '/';
				}
				console.log(App.customization.get('options'));

				if(model.get('status') == 'published'){
					App.canvasView = new App.Views.Canvas({ model: model });
				} else {
					App.canvasView = new App.Views.Draft({ model: model });
				}
			},
			error: function(data, msg){
				console.log("ERROR", data, msg);
			}
		});		
	},
	error: function(){
		alert('Error loading canvas.');
	}
});


/*-------------------------------------------------------------------------------------------------------------/
---------------------------------------------------- ROUTER --------------------------------------------------
--------------------------------------------------------------------------------------------------------------*/

// App.AppRouter = Backbone.Router.extend({
//     routes: {
//         ":id": "canvas",
//         ":id/*options" : "options"
//     }
// });

// // Instantiate the router
// App.router = new App.AppRouter;

// App.router.on('route:canvas', function (id) {
// });

// App.router.on('route:options', function (id, options) {
// 		alert('load options');
//     	console.log(options);
//     	var option_list = options.split('_');
//     	_.each(option_list, function(item){
//     		selection = item.split(':');
//     		console.log(selection[1]);
//     	});

//     	//Reset the router
//     	var navigateString = id + "/";
//     	App.customization.get('options').each(function(item){
//     		navigateString += item.get('attribute') + ":" + item.get('id') + "_";
//     	});
//     	this.navigate(navigateString);
// });

// // Start Backbone history a necessary step for bookmarkable URL's
// Backbone.history.start();

/*-------------------------------------------------------------------------------------------------------------/
---------------------------------------------------- GLOBAL JQUERY --------------------------------------------
--------------------------------------------------------------------------------------------------------------*/


jQuery().ready(function(){

	//Lightbox hide
	jQuery('#cover, .close_popup').click(function(){
		jQuery('#cover').fadeOut();
		jQuery('.lightbox, .landing_pop').fadeOut();
	});
	
});