var chosena = '';
var chosenb = '';
var chosenc = '';
var chosend = '';
var chosene = '';
var chosenf = '';
var choseng = '';
var chosenh = '';

function sort_colors(a, b) {
	var temp1 = parseInt(a.substring(5));
	var temp2 = parseInt(b.substring(5));
	
	if(temp1 < temp2){
		return -1;
	}else{
		return 1;
	}
}

function hide_sketch() {
	$('.sketch_side_sketch', $('#step_bag_place_colors')).hide();
	$('.sketch_side_colora', $('#step_bag_place_colors')).hide();
	$('.sketch_side_colorb', $('#step_bag_place_colors')).hide();
	$('.sketch_side_colorc', $('#step_bag_place_colors')).hide();
	$('.sketch_side_colord', $('#step_bag_place_colors')).hide();
	$('.sketch_side_colore', $('#step_bag_place_colors')).hide();
	$('.sketch_side_colorf', $('#step_bag_place_colors')).hide();
	$('.sketch_side_colorg', $('#step_bag_place_colors')).hide();
	$('.sketch_side_colorh', $('#step_bag_place_colors')).hide();
	$('.sketch_side_cover', $('#step_bag_place_colors')).hide();
	
	$('.sketch_back_sketch', $('#step_bag_place_colors')).hide();
	$('.sketch_back_colora', $('#step_bag_place_colors')).hide();
	$('.sketch_back_colorb', $('#step_bag_place_colors')).hide();
	$('.sketch_back_colorc', $('#step_bag_place_colors')).hide();
	$('.sketch_back_colord', $('#step_bag_place_colors')).hide();
	$('.sketch_back_colore', $('#step_bag_place_colors')).hide();
	$('.sketch_back_colorf', $('#step_bag_place_colors')).hide();
	$('.sketch_back_colorg', $('#step_bag_place_colors')).hide();
	$('.sketch_back_colorh', $('#step_bag_place_colors')).hide();
	$('.sketch_back_cover', $('#step_bag_place_colors')).hide();
	
	$('.sketch_front_sketch', $('#step_bag_place_colors')).hide();
	$('.sketch_front_lines', $('#step_bag_place_colors')).hide();
	$('.sketch_front_colora', $('#step_bag_place_colors')).hide();
	$('.sketch_front_colorb', $('#step_bag_place_colors')).hide();
	$('.sketch_front_colorc', $('#step_bag_place_colors')).hide();
	$('.sketch_front_colord', $('#step_bag_place_colors')).hide();
	$('.sketch_front_colore', $('#step_bag_place_colors')).hide();
	$('.sketch_front_colorf', $('#step_bag_place_colors')).hide();
	$('.sketch_front_colorg', $('#step_bag_place_colors')).hide();
	$('.sketch_front_colorh', $('#step_bag_place_colors')).hide();
	$('.sketch_front_cover', $('#step_bag_place_colors')).hide();
}

function reset_bag_place_colors() {
	chosena = '';
	chosenb = '';
	chosenc = '';
	chosend = '';
	chosene = '';
	chosenf = '';
	choseng = '';
	chosenh = '';
	
	hide_sketch();
	
	$('.sketch_front_colora').attr('src', 'img/bags/front_cover.png');
	$('.sketch_front_colorb').attr('src', 'img/bags/front_cover.png');
	$('.sketch_front_colorc').attr('src', 'img/bags/front_cover.png');
	$('.sketch_front_colord').attr('src', 'img/bags/front_cover.png');
	$('.sketch_front_colore').attr('src', 'img/bags/front_cover.png');
	$('.sketch_front_colorf').attr('src', 'img/bags/front_cover.png');
	$('.sketch_front_colorg').attr('src', 'img/bags/front_cover.png');
	$('.sketch_front_colorh').attr('src', 'img/bags/front_cover.png');
	
	$('.sketch_side_colora').attr('src', 'img/bags/side_cover.png');
	$('.sketch_side_colorb').attr('src', 'img/bags/side_cover.png');
	$('.sketch_side_colorc').attr('src', 'img/bags/side_cover.png');
	$('.sketch_side_colord').attr('src', 'img/bags/side_cover.png');
	$('.sketch_side_colore').attr('src', 'img/bags/side_cover.png');
	$('.sketch_side_colorf').attr('src', 'img/bags/side_cover.png');
	$('.sketch_side_colorg').attr('src', 'img/bags/side_cover.png');
	$('.sketch_side_colorh').attr('src', 'img/bags/side_cover.png');
	
	$('.sketch_back_colora').attr('src', 'img/bags/back_cover.png');
	$('.sketch_back_colorb').attr('src', 'img/bags/back_cover.png');
	$('.sketch_back_colorc').attr('src', 'img/bags/back_cover.png');
	$('.sketch_back_colord').attr('src', 'img/bags/back_cover.png');
	$('.sketch_back_colore').attr('src', 'img/bags/back_cover.png');
	$('.sketch_back_colorf').attr('src', 'img/bags/back_cover.png');
	$('.sketch_back_colorg').attr('src', 'img/bags/back_cover.png');
	$('.sketch_back_colorh').attr('src', 'img/bags/back_cover.png');
	
	$('.chosen').css('opacity', 1.0);
	
	$('#place_colors_next').css('opacity', 0.3);
}

function end_bag_place_colors() {
	hide_sketch();
}

function start_before_bag_place_colors() {
	if(bag == 'bag1'){
		$('.sketch_front_sketch').attr('src', 'img/bags/sketch1_front.png');
		$('.sketch_front_lines').attr('src', 'img/bags/sketch1_front_lines.png');
		$('.sketch_side_sketch').attr('src', 'img/bags/sketch1_side.png');
		$('.sketch_back_sketch').attr('src', 'img/bags/sketch1_back.png');
	}else if(bag == 'bag2'){
		$('.sketch_front_sketch').attr('src', 'img/bags/sketch2_front.png');
		$('.sketch_front_lines').attr('src', 'img/bags/sketch2_front_lines.png');
		$('.sketch_side_sketch').attr('src', 'img/bags/sketch2_side.png');
		$('.sketch_back_sketch').attr('src', 'img/bags/sketch2_back.png');
	}else if(bag == 'bag3'){
		$('.sketch_front_sketch').attr('src', 'img/bags/sketch3_front.png');
		$('.sketch_front_lines').attr('src', 'img/bags/sketch3_front_lines.png');
		$('.sketch_side_sketch').attr('src', 'img/bags/sketch3_side.png');
		$('.sketch_back_sketch').attr('src', 'img/bags/sketch3_back.png');
	}else{
		$('.sketch_front_sketch').attr('src', 'img/bags/sketch4_front.png');
		$('.sketch_front_lines').attr('src', 'img/bags/sketch4_front_lines.png');
		$('.sketch_side_sketch').attr('src', 'img/bags/sketch4_side.png');
		$('.sketch_back_sketch').attr('src', 'img/bags/sketch4_back.png');
	}
	
	if(color1 == color2 && color1 == color3){
		var temp_colors = new Array(color1);
	}else if(color1 == color2 && color1 != color3){
		var temp_colors = new Array(color1, color3);
	}else if(color1 == color3 && color1 != color2){
		var temp_colors = new Array(color1, color2);
	}else if(color2 == color3 && color2 != color1){
		var temp_colors = new Array(color1, color2);
	}else{
		var temp_colors = new Array(color1, color2, color3);
	}
	
	temp_colors.sort(sort_colors);
	
	color1 = temp_colors[0];
	
	$('.chosen1').attr('src', 'img/colors/' + temp_colors[0] + '.png');
	
	if(temp_colors[1] != undefined){
		color2 = temp_colors[1];
		
		$('.chosen2').attr('src', 'img/colors/' + temp_colors[1] + '.png');
		$('.chosen2').show();
	}else{
		$('.chosen2').hide();
	}
	
	if(temp_colors[2] != undefined){
		color3 = temp_colors[2];
		
		$('.chosen3').attr('src', 'img/colors/' + temp_colors[2] + '.png');
		$('.chosen3').show();
	}else{
		$('.chosen3').hide();
	}
	
	$('#pointerf').show();
	$('#pointerg').show();
	$('#pointerh').show();
	
	if(bag == 'bag1'){
		$('#pointerf').hide();
		$('#pointerg').hide();
		$('#pointerh').hide();
	}else if(bag == 'bag3' || bag == 'bag4'){
		$('#pointerh').hide();
	}
}

function start_after_bag_place_colors() {
	$('.sketch_side_sketch', $('#step_bag_place_colors')).fadeIn(400);
	$('.sketch_side_colora', $('#step_bag_place_colors')).fadeIn(400);
	$('.sketch_side_colorb', $('#step_bag_place_colors')).fadeIn(400);
	$('.sketch_side_colorc', $('#step_bag_place_colors')).fadeIn(400);
	$('.sketch_side_colord', $('#step_bag_place_colors')).fadeIn(400);
	$('.sketch_side_colore', $('#step_bag_place_colors')).fadeIn(400);
	$('.sketch_side_colorf', $('#step_bag_place_colors')).fadeIn(400);
	$('.sketch_side_colorg', $('#step_bag_place_colors')).fadeIn(400);
	$('.sketch_side_colorh', $('#step_bag_place_colors')).fadeIn(400);
	$('.sketch_side_cover', $('#step_bag_place_colors')).fadeIn(400);
	
	$('.sketch_back_sketch', $('#step_bag_place_colors')).fadeIn(400);
	$('.sketch_back_colora', $('#step_bag_place_colors')).fadeIn(400);
	$('.sketch_back_colorb', $('#step_bag_place_colors')).fadeIn(400);
	$('.sketch_back_colorc', $('#step_bag_place_colors')).fadeIn(400);
	$('.sketch_back_colord', $('#step_bag_place_colors')).fadeIn(400);
	$('.sketch_back_colore', $('#step_bag_place_colors')).fadeIn(400);
	$('.sketch_back_colorf', $('#step_bag_place_colors')).fadeIn(400);
	$('.sketch_back_colorg', $('#step_bag_place_colors')).fadeIn(400);
	$('.sketch_back_colorh', $('#step_bag_place_colors')).fadeIn(400);
	$('.sketch_back_cover', $('#step_bag_place_colors')).fadeIn(400);
	
	$('.sketch_front_sketch', $('#step_bag_place_colors')).fadeIn(400);
	$('.sketch_front_lines', $('#step_bag_place_colors')).fadeIn(400);
	$('.sketch_front_colora', $('#step_bag_place_colors')).fadeIn(400);
	$('.sketch_front_colorb', $('#step_bag_place_colors')).fadeIn(400);
	$('.sketch_front_colorc', $('#step_bag_place_colors')).fadeIn(400);
	$('.sketch_front_colord', $('#step_bag_place_colors')).fadeIn(400);
	$('.sketch_front_colore', $('#step_bag_place_colors')).fadeIn(400);
	$('.sketch_front_colorf', $('#step_bag_place_colors')).fadeIn(400);
	$('.sketch_front_colorg', $('#step_bag_place_colors')).fadeIn(400);
	$('.sketch_front_colorh', $('#step_bag_place_colors')).fadeIn(400);
	$('.sketch_front_cover', $('#step_bag_place_colors')).fadeIn(400);
}

function bag_place_colors_load() {
	// LOAD IMAGES
}

$('document').ready(
	function() {
		bag_place_colors_load();
		
		$('.chosen').hover(
			function() {
				$(this).css('border', '2px solid #EE1D23');
			}, function() {
				$(this).css('border', '2px solid black');
			}
		);
		
		$('.chosen').click(
			function() {
				$('.chosen', $(this).parent()).not(this).animate({'opacity': 0.3}, 400);
				$(this).animate({'opacity': 1.0}, 400);
				
				var pointer = $(this).parent().attr('id');
				var color = '';
				
				if($(this).hasClass('chosen1')){
					color = color1;
				}else if($(this).hasClass('chosen2')){
					color = color2;
				}else{
					color = color3;
				}
				
				var temp = color.substring(5);
				
				if(pointer == 'pointera'){
					chosena = color;
					
					if(bag == 'bag1'){
						$('.sketch_front_colora').attr('src', 'img/bags/sketch1_front_a' + temp + '.png');
						$('.sketch_side_colora').attr('src', 'img/bags/sketch1_side_a' + temp + '.png');
					}else if(bag == 'bag2'){
						$('.sketch_front_colora').attr('src', 'img/bags/sketch2_front_a' + temp + '.png');
						$('.sketch_back_colora').attr('src', 'img/bags/sketch2_back_a' + temp + '.png');
					}else if(bag == 'bag3'){
						$('.sketch_front_colora').attr('src', 'img/bags/sketch3_front_a' + temp + '.png');
						$('.sketch_side_colora').attr('src', 'img/bags/sketch3_side_a' + temp + '.png');
					}else{
						$('.sketch_front_colora').attr('src', 'img/bags/sketch4_front_a' + temp + '.png');
						$('.sketch_side_colora').attr('src', 'img/bags/sketch4_side_a' + temp + '.png');
					}
				}else if(pointer == 'pointerb'){
					chosenb = color;
					
					if(bag == 'bag1'){
						$('.sketch_front_colorb').attr('src', 'img/bags/sketch1_front_b' + temp + '.png');
						$('.sketch_side_colorb').attr('src', 'img/bags/sketch1_side_b' + temp + '.png');
					}else if(bag == 'bag2'){
						$('.sketch_front_colorb').attr('src', 'img/bags/sketch2_front_b' + temp + '.png');
						$('.sketch_side_colorb').attr('src', 'img/bags/sketch2_side_b' + temp + '.png');
						$('.sketch_back_colorb').attr('src', 'img/bags/sketch2_back_b' + temp + '.png');
					}else if(bag == 'bag3'){
						$('.sketch_front_colorb').attr('src', 'img/bags/sketch3_front_b' + temp + '.png');
					}else{
						$('.sketch_front_colorb').attr('src', 'img/bags/sketch4_front_b' + temp + '.png');
					}
				}else if(pointer == 'pointerc'){
					chosenc = color;
					
					if(bag == 'bag1'){
						$('.sketch_front_colorc').attr('src', 'img/bags/sketch1_front_c' + temp + '.png');
						$('.sketch_side_colorc').attr('src', 'img/bags/sketch1_side_c' + temp + '.png');
					}else if(bag == 'bag2'){
						$('.sketch_front_colorc').attr('src', 'img/bags/sketch2_front_c' + temp + '.png');
						$('.sketch_side_colorc').attr('src', 'img/bags/sketch2_side_c' + temp + '.png');
						$('.sketch_back_colorc').attr('src', 'img/bags/sketch2_back_c' + temp + '.png');
					}else if(bag == 'bag3'){
						$('.sketch_front_colorc').attr('src', 'img/bags/sketch3_front_c' + temp + '.png');
						$('.sketch_side_colorc').attr('src', 'img/bags/sketch3_side_c' + temp + '.png');
					}else{
						$('.sketch_front_colorc').attr('src', 'img/bags/sketch4_front_c' + temp + '.png');
						$('.sketch_side_colorc').attr('src', 'img/bags/sketch4_side_c' + temp + '.png');
					}
				}else if(pointer == 'pointerd'){
					chosend = color;
					
					if(bag == 'bag1'){
						$('.sketch_front_colord').attr('src', 'img/bags/sketch1_front_d' + temp + '.png');
						$('.sketch_side_colord').attr('src', 'img/bags/sketch1_side_d' + temp + '.png');
					}else if(bag == 'bag2'){
						$('.sketch_front_colord').attr('src', 'img/bags/sketch2_front_d' + temp + '.png');
						$('.sketch_side_colord').attr('src', 'img/bags/sketch2_side_d' + temp + '.png');
						$('.sketch_back_colord').attr('src', 'img/bags/sketch2_back_d' + temp + '.png');
					}else if(bag == 'bag3'){
						$('.sketch_front_colord').attr('src', 'img/bags/sketch3_front_d' + temp + '.png');
						$('.sketch_side_colord').attr('src', 'img/bags/sketch3_side_d' + temp + '.png');
						$('.sketch_back_colord').attr('src', 'img/bags/sketch3_back_d' + temp + '.png');
					}else{
						$('.sketch_front_colord').attr('src', 'img/bags/sketch4_front_d' + temp + '.png');
						$('.sketch_side_colord').attr('src', 'img/bags/sketch4_side_d' + temp + '.png');
						$('.sketch_back_colord').attr('src', 'img/bags/sketch4_back_d' + temp + '.png');
					}
				}else if(pointer == 'pointere'){
					chosene = color;
					
					if(bag == 'bag1'){
						$('.sketch_side_colore').attr('src', 'img/bags/sketch1_side_e' + temp + '.png');
						$('.sketch_back_colore').attr('src', 'img/bags/sketch1_back_e' + temp + '.png');
					}else if(bag == 'bag2'){
						$('.sketch_front_colore').attr('src', 'img/bags/sketch2_front_e' + temp + '.png');
					}else if(bag == 'bag3'){
						$('.sketch_front_colore').attr('src', 'img/bags/sketch3_front_e' + temp + '.png');
						$('.sketch_side_colore').attr('src', 'img/bags/sketch3_side_e' + temp + '.png');
						$('.sketch_back_colore').attr('src', 'img/bags/sketch3_back_e' + temp + '.png');
					}else{
						$('.sketch_front_colore').attr('src', 'img/bags/sketch4_front_e' + temp + '.png');
						$('.sketch_side_colore').attr('src', 'img/bags/sketch4_side_e' + temp + '.png');
						$('.sketch_back_colore').attr('src', 'img/bags/sketch4_back_e' + temp + '.png');
					}
				}else if(pointer == 'pointerf'){
					chosenf = color;
					
					if(bag == 'bag1'){
						
					}else if(bag == 'bag2'){
						$('.sketch_front_colorf').attr('src', 'img/bags/sketch2_front_f' + temp + '.png');
						$('.sketch_side_colorf').attr('src', 'img/bags/sketch2_side_f' + temp + '.png');
						$('.sketch_back_colorf').attr('src', 'img/bags/sketch2_back_f' + temp + '.png');
					}else if(bag == 'bag3'){
						$('.sketch_front_colorf').attr('src', 'img/bags/sketch3_front_f' + temp + '.png');
						$('.sketch_side_colorf').attr('src', 'img/bags/sketch3_side_f' + temp + '.png');
					}else{
						$('.sketch_front_colorf').attr('src', 'img/bags/sketch4_front_f' + temp + '.png');
						$('.sketch_side_colorf').attr('src', 'img/bags/sketch4_side_f' + temp + '.png');
					}
				}else if(pointer == 'pointerg'){
					choseng = color;
					
					if(bag == 'bag1'){
						
					}else if(bag == 'bag2'){
						$('.sketch_back_colorg').attr('src', 'img/bags/sketch2_back_g' + temp + '.png');
					}else if(bag == 'bag3'){
						$('.sketch_back_colorg').attr('src', 'img/bags/sketch3_back_g' + temp + '.png');
						$('.sketch_side_colorg').attr('src', 'img/bags/sketch3_side_g' + temp + '.png');
					}else{
						$('.sketch_back_colorg').attr('src', 'img/bags/sketch4_back_g' + temp + '.png');
						$('.sketch_side_colorg').attr('src', 'img/bags/sketch4_side_g' + temp + '.png');
					}
				}else if(pointer == 'pointerh'){
					chosenh = color;
					
					if(bag == 'bag1'){
						
					}else if(bag == 'bag2'){
						$('.sketch_side_colorh').attr('src', 'img/bags/sketch2_side_h' + temp + '.png');
					}else if(bag == 'bag3'){
						
					}else{
						
					}
				}
				
				if(
					(chosena != '' && chosenb != '' && chosenc != '' && chosend != '' && chosene != '' && bag == 'bag1') ||
					(chosena != '' && chosenb != '' && chosenc != '' && chosend != '' && chosene != '' && chosenf != '' && choseng != '' && chosenh != '' && bag == 'bag2') ||
					(chosena != '' && chosenb != '' && chosenc != '' && chosend != '' && chosene != '' && chosenf != '' && choseng != '' && bag == 'bag3') ||
					(chosena != '' && chosenb != '' && chosenc != '' && chosend != '' && chosene != '' && chosenf != '' && choseng != '' && bag == 'bag4')
				){
					
					$('#place_colors_next').animate({'opacity': 1.0}, 400);
					
				}
			}
		);
		
		$('#place_colors_next').click(
			function() {
				if($(this).css('opacity') == 1){
					show_next();
				}
			}
		);
		
		$('.step_header_back', $('#step_bag_place_colors')).click(
			function() {
				reset_steps('step_bag_place_colors');
			}
		);
	}
);