var model = {
	ENABLE:false,	
	bikeID:0,
	patternID:0,
	partFamilyID:0,
	color:[],
	getColorList:function(){
		var i,list = '';
		for(i=0;i<model.color.length;i++){
			list = list + model.color[i];
			if(i < model.color.length-1){
				list = list + '|';
			}
		}
		return list;
	}
};

var view = {
	DEFAULT_COLOR_ID:16,
	baseColorID:'',	
	init:function(){
		view.baseColorID = new RadioGroup('colorID');
		return;
	},
	
	switchFrame:function(colorID,color_0,color_1,color_2,color_3,color_4){
		if(colorID.toString() === view.DEFAULT_COLOR_ID.toString()){
			return;
		}
		
		if(model.ENABLE){
			color.activeLayer.set('0');
			color.pick(color_0);
			color.activeLayer.set('1');
			color.pick(color_1);
			color.activeLayer.set('2');
			color.pick(color_2);
			color.activeLayer.set('3');
			color.pick(color_3);
			color.activeLayer.set('4');
			color.pick(color_4);
		}
		
		view.baseColorID.set(colorID.toString());
		return;
	}
};

var control = {
	switchPattern:function(patternID){
		model.patternID = patternID;
		cfkit_util.redirect('/axus/bike_builder/color.cfm?bikeID=' + model.bikeID + '&patternID=' + model.patternID + '&colors=' + model.getColorList());
		return;
	},
	submit:function(){
		dojo.byId('colors').value = model.getColorList();
		dojo.byId('colorID').value = view.baseColorID.get();
		dojo.byId('frmDesignInfo').submit();
		return;
	}
};

var color = {
	SRC:'',
	palette:[],
	activeLayer:'',
	model:{},
	palette:[],
	
	init:function(palette){
		if(!model.ENABLE){
			return;
		}
		color.palette = palette;
		color.SRC = '/axus/gfx/bike_builder/color/family_' + model.partFamilyID + '/' + 'pattern_'  + model.patternID + '/';
		color.activeLayer = new RadioGroup('activeLayer');
		color._setLayer('base',model.color[0]);
		color._setLayer('layer_1',model.color[1]);
		color._setLayer('layer_2',model.color[2]);
		color._setLayer('layer_3',model.color[3]);
		color._setLayer('layer_4',model.color[4]);
		dojo.byId('layer_background').style.backgroundImage = 'url(' + color.SRC + 'base/background.png' +')';
		dojo.byId('outline').style.backgroundImage = 'url(' + color.SRC + 'base/outline.png' +')';
		color.activeLayer.set('0');
		color.paintPalette();
		color.drawModel();
		return;
	},
	
	_setLayer:function(layer,colorIndex){
		color.model[layer] = colorIndex;
		return;
	},
	
	_drawLayer:function(layer,colorIndex){
		var imgSrc = color.getImgUrl(layer,colorIndex);
		dojo.byId(layer).style.backgroundImage = 'url(' + imgSrc +')';
		return;		
	},
	
	drawModel:function(){
		color._drawLayer('base',color.model.base);
		color._drawLayer('layer_1',color.model.layer_1);
		color._drawLayer('layer_2',color.model.layer_2);
		color._drawLayer('layer_3',color.model.layer_3);
		color._drawLayer('layer_4',color.model.layer_4);
		
		dojo.byId('model_base').style.backgroundColor = color.palette[color.model.base].web;
		dojo.byId('model_layer_1').style.backgroundColor = color.palette[color.model.layer_1].web;
		dojo.byId('model_layer_2').style.backgroundColor = color.palette[color.model.layer_2].web;
		dojo.byId('model_layer_3').style.backgroundColor = color.palette[color.model.layer_3].web;
		dojo.byId('model_layer_4').style.backgroundColor = color.palette[color.model.layer_4].web;
		
		dojo.byId('model_base_ral').innerHTML = color.palette[color.model.base].ral;
		dojo.byId('model_layer_1_ral').innerHTML = color.palette[color.model.layer_1].ral;
		dojo.byId('model_layer_2_ral').innerHTML = color.palette[color.model.layer_2].ral;
		dojo.byId('model_layer_3_ral').innerHTML = color.palette[color.model.layer_3].ral;
		dojo.byId('model_layer_4_ral').innerHTML = color.palette[color.model.layer_4].ral;
		return;
	},
	
	getActiveLayer:function(){
		var value,layer;
		value = color.activeLayer.get();
		if(value.toString() === '0'){
			layer = 'base';
		}else{
			layer = 'layer_' + value;
		}
		return layer;
	},
	
	getImgUrl:function(layer,colorIndex){
		var src,extension;
		extension = '.png';
		src = color.SRC + layer + '/' + color.palette[colorIndex].id + extension;
		return src;
	},
	
	pick:function(colorIndex){
		model.color[color.activeLayer.get()] = colorIndex;
		color._setLayer(color.getActiveLayer(),colorIndex);
		color.drawModel();
		color.paintPalette();
		view.baseColorID.set(view.DEFAULT_COLOR_ID.toString());
		return;
	},
	
	paintActiveLayer:function(colorIndex){
		color._drawLayer(color.getActiveLayer(),colorIndex);
		return;
	},
	
	paintPalette:function(){
		var i,layer;
		
		layer = color.getActiveLayer();
		
		for(i=0;i<color.palette.length;i++){
			if(i.toString() !== color.model[layer].toString()){
				dojo.byId('plate_' + i).className = 'plate';
			}else{
				dojo.byId('plate_' + i).className = 'plateSelected';
			}
			dojo.byId('plate_' + i).style.backgroundColor = color.palette[i].web;
		}
		return;
	}
};