var Configurator = new Class({
	Implements: [Options, Events],
	options: {
		'rootContainerID'  	: 'configurator',
		'frameContainerID' 	: 'framesContainer',
		'wheelContainerID' 	: 'wheelsContainer',
		'bikeContainerID'  	: 'bikeContainer',
		'savedContainerID' 	: 'savedSelections',
		'requestUrl'	   	: '/core/json.configurator.requests.php',
		'imgSystemPath'	   	: '/images/',
		'imgBikePath'	   	: '/img/425-340',
		'imgBikePathBig'	: '/img/1000-800'
	},
	initialize: function(options, slider){
		
		this.slider = slider;
		this.setOptions(options);
		this.create();
	},
	userSession: {
		aJsonRequest 	: null,
		aFrames			: null,
		aSelected		: null,
		aBike			: null,
		aDescription	: null,
		aSlot1			: null,
		aSlot2			: null,
		aSlot3			: null,
		viewInit		: true,
		iSteps			: 0 // 0=>{nothing clicked or selected} 1=>{selected a wheel} 
	},
	setIStep: function(i){
		this.userSession.iSteps = i;
	},
	setUserSessionFrames: function(){
		var aArr = new Array();
		var lastFrameId;
		this.userSession.aJsonRequest.each(function(item,index){
			if(lastFrameId !== item['frame_id']){
				lastFrameId = item['frame_id'];
				var obj = new Object();
				obj['frame_id'] = lastFrameId;
				obj['frame_name'] = item['frame_name'];
				if(lastFrameId !== null){
					aArr[lastFrameId-1] = obj;
				}
			}
		});
		this.userSession.aFrames = aArr;
	},
	setUserSessionDescription: function(){
		var c = this;
		var jRequest = new Request.JSON({
			url: this.options.requestUrl,
			onSuccess: function(response){
				c.userSession.aDescription = response;
				
				c.createDescriptions(true); // here we create for the first time!
			}
		}).get({ 'action': 'getAllDescriptions' });
	},
	setSelectedBike: function(bikeId){
		var c = this;
		var id = bikeId;
		var aArr = new Array();
		var i = 0;
		c.userSession.aJsonRequest.each(function(item,index){
			if(item['frame_id']==id){
				aArr[i] = item;
				i = i + 1;
			}
		});
		c.userSession.aSelected = aArr;
	},
	setSaveSlot: function(slot){
		if(this.validateSlot(slot)){
			if(this.isSelectedBike()){
				if(this.isSelectedWheel()){
					if(this.checkSlots()){
						this.saveToSlot(slot);
					}else{ /*console.log('Deze selectie wordt al gebruikt!', slot);*/ }
				}else{ /*console.log('er is een frame gekozen, maar nog geen wiel geselecteerd', slot);*/ }
			}else{ /*console.log('er is nog geen frame en wiel geselecteerd', slot);*/ }
		}else { /*console.log('het slot is al ingebruik!', slot);*/ }
	},
	errorMessage: function(msg, type){
		if(type == 'info'){
		}
		if(type == 'warn'){
		}
		if(type == 'error'){
		}
	},
	checkSlots: function(){
		var slot1 = this.userSession.aSlot1;
		var slot2 = this.userSession.aSlot2;
		var slot3 = this.userSession.aSlot3;
		var bike = this.userSession.aBike;
		
		if(slot1 == bike){ return false; }
		else if(slot2 == bike){ return false; }
		else if(slot3 == bike){ return false; }
		else{ return true; }
	},
	saveToSlot: function(slot, init){
		if(slot == 1){
			this.userSession.aSlot1 = this.userSession.aBike;
			this.createSlotHTML('slotHolder1');
		}
		if(slot == 2){
			this.userSession.aSlot2 = this.userSession.aBike;
			this.createSlotHTML('slotHolder2');
		}
		if(slot == 3){
			this.userSession.aSlot3 = this.userSession.aBike;
			this.createSlotHTML('slotHolder3');
		}
	},
	createSlotHTML: function(slot){
			var c = this;
			var root = $(this.options.savedContainerID).getElementById(slot);
			var desc = this.userSession.aDescription;
			
			var pText = '<span class="frame_name">' + this.userSession.aBike['frame_name'] + '</span>' + '<br />' + '<span class="wheel_name">' + this.userSession.aBike['wheel_name'] + '</span>';

			var sNumber = '';
			if(slot == 'slotHolder1'){ sNumber = '01'; }
			else if(slot == 'slotHolder2'){ sNumber = '02'; }
			else if(slot == 'slotHolder3'){ sNumber = '03'; }


			var elementH1 = new Element('h1',{
					'text': (desc['0']['save']['save_choice'])+sNumber,
					'class': 'choice',
					'events' : {
						'click':function(){			
							c.createBikeHTMLFromSlot(slot);
						}
					}
				});
				
			
			var elementParagraph = new Element('p',{
					'html'	: pText,
					'class' : 'text'
				});

			var elementImg = new Element('img',{
					//'src' 	: this.options.imgSystemPath+'bt-cross.png',
					'src' 	: '/template/images/configurator/bt-cross.png',
					'styles': {
						'float' : 'right',
						'cursor': 'pointer'
					},
					'events': {
						'click': function(){
							c.emptySlot(slot);
							c.createBikeHTML();
							c.createDescriptions(false);
						}
					}
				}); 
			
			root.empty();
			root.addClass('selected');
			elementH1.inject(root,'top');
			elementParagraph.inject(root,'bottom');	
			elementImg.inject(root,'bottom');				
			
		

	},
	emptySlot: function(slot){
		if(slot == 'slotHolder1'){ 
			this.userSession.aSlot1 = null; 
		}else if (slot == 'slotHolder2'){ 
			this.userSession.aSlot2 = null; 
		}else if (slot == 'slotHolder3'){ 
			this.userSession.aSlot3 = null; 
		}
		this.resetSlot(slot);
	},
	resetSlot: function(slot){
		var root = $(this.options.savedContainerID).getElementById(slot);
		var desc = this.userSession.aDescription;		
		var rootSaved = $(this.options.savedContainerID);
		var elementH1 = new Element('h1',{
				'text' : desc['0']['save']['save_slot'],
				'styles' : {
					'margin' : '0',
					'line-height' 	: '115px',
					'font-size' 	: '24px',
					'color' 		: '#666',
					'text-align'	: 'center'
				}
			});
		
		/*
		if(this.userSession.iSteps == 1){
			if(btnParent !== null){
				var elem = btn;
				elem.inject(btnParent, 'after');
				btnParent.destroy();
				this.userSession.viewInit = true;
			}
		}*/
		
		root.empty();
		root.removeClass('selected');
		elementH1.inject(root, 'top');		
	},
	isSelectedBike: function(){
		if(this.userSession.aSelected == null){
			return false;
		}else{
			return true;
		}
	},
	isSelectedWheel: function(){
		if(this.userSession.aBike == null){
			return false;
		}else{
			return true;
		}
	},
	validateSlot: function(slot){
		var curSlot = null;
		if(slot == 1){
			curSlot = this.userSession.aSlot1;	
		}else if(slot == 2){
			curSlot = this.userSession.aSlot2;
		}else if(slot == 3){
			curSlot = this.userSession.aSlot3;
		}
		if(curSlot == null){ 
			return true; 
		}else{ 
			return false;
		}
	},
	createDescriptions: function(initial){
		var desc = this.userSession.aDescription;
		var rootButtons = $(this.options.bikeContainerID).getElement('div.buttons');
		var rootSaved = $(this.options.savedContainerID);
		if(initial == true){
			rootButtons.getElement('span#btn-lang-slot-1').set('text',desc['2']['button']['save_slot_1']);
			rootButtons.getElement('span#btn-lang-slot-2').set('text',desc['2']['button']['save_slot_2']);
			rootButtons.getElement('span#btn-lang-slot-3').set('text',desc['2']['button']['save_slot_3']);
			rootButtons.getElement('span#btn-lang-view').set('text',desc['2']['button']['view']);
			rootButtons.getElement('span#btn-lang-print').set('text',desc['2']['button']['print']);
			rootSaved.getElement('div.header').set('text',desc['0']['save']['save_title']);
			rootSaved.getElement('div.content').getElements('div.saveBlock').each(function(item,index){
				var elementH1 = new Element('h1',{
					'text' : desc['0']['save']['save_slot'],
					'styles' : {
						'margin' : '0',
						'line-height' 	: '115px',
						'font-size' 	: '24px',
						'color' 		: '#666',
						'text-align'	: 'center'
					}
				});
				elementH1.inject(item, 'top');
			});
		}
		
		
		
		var elementParagraphSaved = new Element('h1',{
				'text' : desc['1']['bike']['choose_selection'],
				'styles': {
					'position'	: 'absolute',
					'top'		: '140px',
					'left'		: '190px',
					'color'		: 'red',
					'font-size' : '24px',
					'width'		: '200px',
					'text-align': 'center',
					'color'		: '#FFFFFF'
				}
			});
		var elementParagraphOr = new Element('h1',{
				'text' : desc['1']['bike']['or'],
				'styles': {
					'position'	: 'absolute',
					'top'		: '230px',
					'left'		: '190px',
					'color'		: 'red',
					'font-size' : '24px',
					'font-weight'	: 'bold',
					'width'		: '200px',
					'text-align': 'center',
					'text-transform' : 'uppercase',
					'color'		: '#666666'
				}
			});
		var elementParagraphBike = new Element('h1',{
				'text' : desc['1']['bike']['select_bike'],
				'styles': {
					'position'	: 'absolute',
					'top'		: '280px',
					'left'		: '190px',
					'color'		: 'red',
					'font-size' : '24px',
					'width'		: '200px',
					'text-align': 'center',
					'color'		: '#FFFFFF'
				}
			});
		var elementParagraphWheel = new Element('h1',{
				'text' : desc['1']['bike']['select_wheel'],
				'styles': {
					'position'	: 'absolute',
					'top'		: '160px',
					'left'		: '190px',
					'color'		: 'red',
					'font-size' : '24px',
					'width'		: '200px',
					'text-align': 'center',
					'color'		: '#FFFFFF'
				}
		});
		if(this.userSession.iSteps == 0){
			elementParagraphSaved.inject($('bikeImageHolder'),'top');
			elementParagraphOr.inject($('bikeImageHolder'),'top');
			elementParagraphBike.inject($('bikeImageHolder'),'top');
		}else if(this.userSession.iSteps == 1){
			elementParagraphWheel.inject($('bikeImageHolder'),'top');
		}
		
	},
	createFrameHTML : function(){
		var root = $(this.options.frameContainerID).getElementById('framesScroll');
		var c = this;
		this.userSession.aFrames.each(function(item,index){
			var elementDiv = new Element('div',{
						'class'	: 'frame'
				});
			var elementParagraph = new Element('p',{	
						'text'	: item['frame_name'],
						'events': {
							'click'	: function(){
								c.slider.reset();
								c.setSelectedBike(item['frame_id']);
								c.setIStep(1);
								c.createWheelHTML();
								c.createBikeHTML();
								c.createDescriptions(false);
								c.userSession.aBike = null;
								c.setStyleSelectedFrame(this);
								if(c.userSession.iSteps == 1){
									var btn = $(c.options.bikeContainerID).getElementById('view');
									var btnParent = btn.getParent('a');
									if(btnParent !== null){
										var elem = btn;
										elem.inject(btnParent, 'after');
										btnParent.destroy();
										c.userSession.viewInit = true;
									}
								}
							}
						}
					});
			elementParagraph.inject(elementDiv, 'top');
			elementDiv.inject(root, 'top');
		});
	},
	setStyleSelectedFrame : function(component){
		$('framesScroll').getElements('div.frame p').removeClass('selected');
		component.set('class','selected');
	},
	createWheelHTML : function(){
		var root = $(this.options.wheelContainerID).getElementById('wheelsScroll');
		var c = this;
		root.empty();		
		this.userSession.aSelected.each(function(item,index){
			var elementDiv = new Element('div',{
					'class'	: 'wheel'
				});
			var elementParagraph = new Element('p',{	
					'text'	: item['wheel_name'],
					'events': {
						'click'	: function(){
							c.setIStep(2);
							c.userSession.aBike = item;
							c.createBikeHTML();
							this.getParent('div').getParent('div').getElements('div').getElement('p').removeClass("selected");
							this.addClass("selected");
						}
					}
				});
			elementParagraph.inject(elementDiv, 'top');
			elementDiv.inject(root, 'top');
		});
	},
	createBikeHTML : function(){
		var root = $(this.options.bikeContainerID).getElementById('bikeImageHolder');
		var pathName = this.options.imgSystemPath;
		var fileName = null;
		var sFrame = null;
		var	sWheel = null;		
		if(this.userSession.iSteps == 0){ 
			fileName = 'default.jpg'; 
		}else if(this.userSession.iSteps == 1){ 
			fileName = 'default-wheel.jpg';
			sFrame = this.userSession.aSelected[0]['frame_name'];
		}else if(this.userSession.iSteps == 2){  
			pathName = this.options.imgBikePath;
			fileName = this.userSession.aBike['url'];
		}
		
		var elementTitleH1 = new Element('h1',{
			'id': 'fullTitle',
			'styles': {
				'position' : 'absolute',
				'width' : '100%',
				'height' : '50px'			}
		});
		var elFrameSpan = new Element('span', {'class' : 'sFrame'});
		var elWheelSpan = new Element('span', {'class':'sWheel'});
		var elSepSpan	= new Element('span', {'class':'seperator'});
		
		var elementA = new Element('a', {
			'rel' : 'milkbox[Configurator]',
			'href' : pathName + fileName
		});
		var elementImage = new Element('img',{
					'src' 	: pathName + fileName,
					'styles': {
						'z-index': '0',
						'border': '0'
					}
			});
		
		if(this.userSession.iSteps == 2){
			elementImage.set('styles', {
				'margin-left' 	: '70px',
				'margin-right'	: '70px',
				'margin-top'	: '37px',
				'margin-bottom' : '35px'
			});
		}

		root.empty();
		elementImage.inject(root,'top');
		
		if(sFrame !== null && this.userSession.iSteps == 1){
			elFrameSpan.set('text',sFrame);
			elFrameSpan.inject(elementTitleH1,'bottom');
			elSepSpan.set('text',' // ');
			elSepSpan.inject(elementTitleH1,'bottom');
			elWheelSpan.set('text','...');
			elWheelSpan.inject(elementTitleH1,'bottom');
			elementTitleH1.inject(root,'top');
		}else if(this.userSession.iSteps == 2){
			elFrameSpan.set('text',this.userSession.aBike['frame_name']);
			elFrameSpan.inject(elementTitleH1,'bottom');
			elSepSpan.set('text',' // ');
			elSepSpan.inject(elementTitleH1,'bottom');
			elWheelSpan.set('text',this.userSession.aBike['wheel_name']);
			elWheelSpan.inject(elementTitleH1,'bottom');
			elementTitleH1.inject(root,'top');
			if(this.userSession.iSteps == 2){
				var btn = $(this.options.bikeContainerID).getElementById('view');
				var btnParent = btn.getParent('a');
				if(btnParent == null && this.userSession.viewInit == true){
					var elementMyA = new Element('a',{
						'href' 	: this.options.imgBikePathBig + fileName,
						'rel'	: 'milkbox[Configurator]'
					});
					elementMyA.wraps(btn);
				}
				else if(btnParent !== null && this.userSession.viewInit == false ){
					btnParent.setProperty('href',this.options.imgBikePathBig + fileName);
				}else if(btnParent !== null && this.userSession.viewInit == true){
					btnParent.setProperty('href',this.options.imgBikePathBig + fileName);
				}
				milkbox.initialize();							
			}
		}
	},
	createBikeHTMLFromSlot : function(slot){
		var root = $(this.options.bikeContainerID).getElementById('bikeImageHolder');
		var pathName = this.options.imgBikePath;
		var fileName = null;
		if(slot == 'slotHolder1'){
			fileName = this.userSession.aSlot1['url'];			
		}else if(slot == 'slotHolder2'){
			fileName = this.userSession.aSlot2['url'];
		}else if(slot == 'slotHolder3'){
			fileName = this.userSession.aSlot3['url'];
		}

		var elementTitleH1 = new Element('h1',{
			'id': 'fullTitle', 
			'styles': {
				'position' : 'absolute',
				'width' : '100%',
				'height' : '50px'
			}
		});
		var elFrameSpan = new Element('span', {'class' : 'sFrame'});
		var elWheelSpan = new Element('span', {'class':'sWheel'});
		var elSepSpan	= new Element('span', {'class':'seperator'});
		var elSepSpan2  = new Element('span', {'class':'seperator'});
		var elSlotNr	= new Element('span', {'class':'slotNr'});
		var elementImage = new Element('img',{
					'src' 	: pathName + fileName,
					'styles': {
						'z-index': '0',
						'border': '0',
						'margin-left' 	: '70px',
						'margin-right'	: '70px',
						'margin-top'	: '37px',
						'margin-bottom' : '35px'
					}
			});
		
		root.empty();
		elementImage.inject(root,'top');

		if(slot == 'slotHolder1'){
			elFrameSpan.set('text',this.userSession.aSlot1['frame_name']);
			elFrameSpan.inject(elementTitleH1,'bottom');
			elSepSpan.set('text',' // ');
			elSepSpan.inject(elementTitleH1,'bottom');
			elWheelSpan.set('text',this.userSession.aSlot1['wheel_name']);
			elWheelSpan.inject(elementTitleH1,'bottom');
			//elSepSpan2.set('text',' // ');
			//elSepSpan2.inject(elementTitleH1,'bottom');		
			//elSlotNr.set('text',' #01');
			//elSlotNr.inject(elementTitleH1,'bottom');
			elementTitleH1.inject(root,'top');		
		}else if(slot == 'slotHolder2'){
			elFrameSpan.set('text',this.userSession.aSlot2['frame_name']);
			elFrameSpan.inject(elementTitleH1,'bottom');
			elSepSpan.set('text',' // ');
			elSepSpan.inject(elementTitleH1,'bottom');
			elWheelSpan.set('text',this.userSession.aSlot2['wheel_name']);
			elWheelSpan.inject(elementTitleH1,'bottom');
			//elSepSpan2.set('text',' // ');
			//elSepSpan2.inject(elementTitleH1,'bottom');					
			//elSlotNr.set('text',' #02');
			//elSlotNr.inject(elementTitleH1,'bottom');
			elementTitleH1.inject(root,'top');		
		}else if(slot == 'slotHolder3'){
			elFrameSpan.set('text',this.userSession.aSlot3['frame_name']);
			elFrameSpan.inject(elementTitleH1,'bottom');
			elSepSpan.set('text',' // ');
			elSepSpan.inject(elementTitleH1,'bottom');
			elWheelSpan.set('text',this.userSession.aSlot3['wheel_name']);
			elWheelSpan.inject(elementTitleH1,'bottom');
			//elSepSpan2.set('text',' // ');
			//elSepSpan2.inject(elementTitleH1,'bottom');					
			//elSlotNr.set('text',' #03');
			//elSlotNr.inject(elementTitleH1,'bottom');			
			elementTitleH1.inject(root,'top');		
		}	
		var btn = $(this.options.bikeContainerID).getElementById('view');
		if(btn.getParent('a') !== null){
			btn.getParent('a').setProperty('href',this.options.imgBikePathBig + fileName);
		}else if(btn.getParent('a') == null){
			var elementMyA = new Element('a',{
				'href' 	: this.options.imgBikePathBig + fileName,
				'rel'	: 'milkbox[Configurator]'
			});
			elementMyA.wraps(btn);				
		}
		milkbox.initialize();
		
		
	},
	createButtonHTML : function(){
		var c = this;
		var rootButton = $(this.options.bikeContainerID);
		rootButton.getElementById('saveToSlot1').set({
				'events' : {
					'click': function(){
						c.setSaveSlot(1);
					}
				}
			});
		rootButton.getElementById('saveToSlot2').set({
			'events' : {
				'click': function(){
					c.setSaveSlot(2);
				}
			}
		});
		rootButton.getElementById('saveToSlot3').set({
			'events' : {
				'click': function(){
					c.setSaveSlot(3);
				}
			}
		});
		
		
		rootButton.getElementById('printConfig').set({
			'events' : {
				'click': function(){
					c.printMyConfiguration();
				}
			}
			
		});
	},
	printMyConfiguration : function(){
		var btn = $(this.options.bikeContainerID).getElementById('view');
		var btnParent = btn.getParent('a');
		if(btnParent !== null){
			if(this.userSession.iSteps == 2){
				var DocumentContainer = $(this.options.bikeContainerID).getElementById('bikeImageHolder');
				var windowObject = window.open('','windowname',"status=0,toolbar=0,location=0,menubar=0,directories=0,resizable=0,scrollbars=0,height=415,width=566")
				var stylesheet = '<style type="text/css" media="screen, print">';
					stylesheet+= 'h1#fullTitle { font-size: 20px; font-weight: bold; text-align:center;}';
					stylesheet+= 'h1#fullTitle span.sFrame { color:#111111;}';
					stylesheet+= 'h1#fullTitle span.seperator { color: #CCC; }';
					stylesheet+= 'h1#fullTitle span.sWheel { color: red; }';
					stylesheet+= '</style>';
				
				windowObject.document.writeln(stylesheet);
				windowObject.document.writeln(DocumentContainer.innerHTML);
				windowObject.document.close();
				windowObject.focus();			
				
			}else{
				
				var DocumentContainer = $(this.options.bikeContainerID).getElementById('bikeImageHolder');
				if(DocumentContainer.getElement('img').getProperty('src') !== this.options.imgSystemPath +'default-wheel.jpg'){
					
					var windowObject = window.open('','windowname',"status=0,toolbar=0,location=0,menubar=0,directories=0,resizable=0,scrollbars=0,height=415,width=566")
					var stylesheet = '<style type="text/css" media="screen, print">';
						stylesheet+= 'h1#fullTitle { font-size: 20px; font-weight: bold; text-align:center;}';
						stylesheet+= 'h1#fullTitle span.sFrame { color:#111111;}';
						stylesheet+= 'h1#fullTitle span.seperator { color: #CCC; }';
						stylesheet+= 'h1#fullTitle span.sWheel { color: red; }';
						stylesheet+= '</style>';
					
					windowObject.document.writeln(stylesheet);
					windowObject.document.writeln(DocumentContainer.innerHTML);
					windowObject.document.close();
					windowObject.focus();			
					
				}
				
				
			}
		}
	},
	create: function(){
		var c = this;
		var jRequest = new Request.JSON({
			url: this.options.requestUrl,
			onSuccess: function(response){
				c.userSession.aJsonRequest = response; // here we set the full array of json by 'getAll'
				c.setUserSessionDescription(); // here we are going to get all the descriptions
				c.setUserSessionFrames(); // now we set an array of frames
				c.createFrameHTML(); // here we are going to set the html for the frame scroller!
				c.createBikeHTML(); // here we are going to set the bike HTML
				c.createButtonHTML(); // here we are going to setup the button actions!
			}
		}).get({ 'action': 'getAll' });
		
	}
});