var logo_placement = new Array();

var newImg = new Array();



var thermos_placement = new Array();


thermos_placement['thermos1'] = new Array();

thermos_placement['thermos1'][0] = new Array();
thermos_placement['thermos1'][0]['x'] = 131;
thermos_placement['thermos1'][0]['y'] = 120;


thermos_placement['thermos2'] = new Array();

thermos_placement['thermos2'][0] = new Array();
thermos_placement['thermos2'][0]['x'] = 108;
thermos_placement['thermos2'][0]['y'] = 110;
thermos_placement['thermos2'][1] = new Array();
thermos_placement['thermos2'][1]['x'] = 108;
thermos_placement['thermos2'][1]['y'] = 195;


thermos_placement['thermos3'] = new Array();

thermos_placement['thermos3'][0] = new Array();
thermos_placement['thermos3'][0]['x'] = 135;
thermos_placement['thermos3'][0]['y'] = 80;


thermos_placement['thermos4'] = new Array();

thermos_placement['thermos4'][0] = new Array();
thermos_placement['thermos4'][0]['x'] = 135;
thermos_placement['thermos4'][0]['y'] = 105;


thermos_placement['thermos5'] = new Array();

thermos_placement['thermos5'][0] = new Array();
thermos_placement['thermos5'][0]['x'] = 135;
thermos_placement['thermos5'][0]['y'] = 42;
thermos_placement['thermos5'][1] = new Array();
thermos_placement['thermos5'][1]['x'] = 134;
thermos_placement['thermos5'][1]['y'] = 94;
thermos_placement['thermos5'][2] = new Array();
thermos_placement['thermos5'][2]['x'] = 135;
thermos_placement['thermos5'][2]['y'] = 215;


var thermos_containements = new Array();


thermos_containements['thermos1'] = new Array();

thermos_containements['thermos1'][0] = new Array();
thermos_containements['thermos1'][0]['x'] = 124;
thermos_containements['thermos1'][0]['y'] = 94;
thermos_containements['thermos1'][0]['w'] = 45;
thermos_containements['thermos1'][0]['h'] = 145;


thermos_containements['thermos2'] = new Array();

thermos_containements['thermos2'][0] = new Array();
thermos_containements['thermos2'][0]['x'] = 78;
thermos_containements['thermos2'][0]['y'] = 110;
thermos_containements['thermos2'][0]['w'] = 94;
thermos_containements['thermos2'][0]['h'] = 60;
thermos_containements['thermos2'][1] = new Array();
thermos_containements['thermos2'][1]['x'] = 89;
thermos_containements['thermos2'][1]['y'] = 195;
thermos_containements['thermos2'][1]['w'] = 71;
thermos_containements['thermos2'][1]['h'] = 40;


thermos_containements['thermos3'] = new Array();

thermos_containements['thermos3'][0] = new Array();
thermos_containements['thermos3'][0]['x'] = 120;
thermos_containements['thermos3'][0]['y'] = 80;
thermos_containements['thermos3'][0]['w'] = 60;
thermos_containements['thermos3'][0]['h'] = 175;


thermos_containements['thermos4'] = new Array();

thermos_containements['thermos4'][0] = new Array();
thermos_containements['thermos4'][0]['x'] = 125;
thermos_containements['thermos4'][0]['y'] = 105;
thermos_containements['thermos4'][0]['w'] = 50;
thermos_containements['thermos4'][0]['h'] = 145;


thermos_containements['thermos5'] = new Array();

thermos_containements['thermos5'][0] = new Array();
thermos_containements['thermos5'][0]['x'] = 130;
thermos_containements['thermos5'][0]['y'] = 42;
thermos_containements['thermos5'][0]['w'] = 40;
thermos_containements['thermos5'][0]['h'] = 43;
thermos_containements['thermos5'][1] = new Array();
thermos_containements['thermos5'][1]['x'] = 127;
thermos_containements['thermos5'][1]['y'] = 94;
thermos_containements['thermos5'][1]['w'] = 45;
thermos_containements['thermos5'][1]['h'] = 110;
thermos_containements['thermos5'][2] = new Array();
thermos_containements['thermos5'][2]['x'] = 134;
thermos_containements['thermos5'][2]['y'] = 215;
thermos_containements['thermos5'][2]['w'] = 32;
thermos_containements['thermos5'][2]['h'] = 42;


function hide_thermos_place_logos() {
	$('.thermos_sketch_front', $('#step_thermos_place_logos')).hide();
	$('.thermos_sketch_front_color', $('#step_thermos_place_logos')).hide();
	$('.thermos_logo_container', $('#step_thermos_place_logos')).hide();
}

function reset_thermos_place_logos() {
	newImg.length = 0;
	
	hide_thermos_place_logos();
	
	$('#place_logo1_horz').parent().html('<div id="place_logo1_horz"></div>');
	$('#place_logo1_vert').parent().html('<div id="place_logo1_vert"></div>');
	$('#place_logo2_horz').parent().html('<div id="place_logo2_horz"></div>');
	$('#place_logo2_vert').parent().html('<div id="place_logo2_vert"></div>');
	$('#place_logo3_horz').parent().html('<div id="place_logo3_horz"></div>');
	$('#place_logo3_vert').parent().html('<div id="place_logo3_vert"></div>');
}

function start_before_thermos_place_logos() {
	$('.thermos_logo_container').html('');
	
	var count = 3;
	
	if(logos_crop[0] != undefined){
		$('.thermos_logo_container').append('<img class="thermos_logo1" src="upl/' + logos_crop[0] + '">');
		
		newImg[0] = new Image();
		newImg[0].src = $('.thermos_logo1').attr('src');
	}else if(logos[0] != undefined){
		$('.thermos_logo_container').append('<img class="thermos_logo1" src="upl/' + logos[0] + '">');
		
		newImg[0] = new Image();
		newImg[0].src = $('.thermos_logo1').attr('src');
	}else{
		count--;
	}
	
	
	if(logos_crop[1] != undefined){
		$('.thermos_logo_container').append('<img class="thermos_logo2" src="upl/' + logos_crop[1] + '">');
		
		newImg[1] = new Image();
		newImg[1].src = $('.thermos_logo2').attr('src');
	}else if(logos[1] != undefined){
		$('.thermos_logo_container').append('<img class="thermos_logo2" src="upl/' + logos[1] + '">');
		
		newImg[1] = new Image();
		newImg[1].src = $('.thermos_logo2').attr('src');
	}else{
		count--;
	}
	
	
	if(logos_crop[2] != undefined){
		$('.thermos_logo_container').append('<img class="thermos_logo3" src="upl/' + logos_crop[2] + '">');
		
		newImg[2] = new Image();
		newImg[2].src = $('.thermos_logo3').attr('src');
	}else if(logos[2] != undefined){
		$('.thermos_logo_container').append('<img class="thermos_logo3" src="upl/' + logos[2] + '">');
		
		newImg[2] = new Image();
		newImg[2].src = $('.thermos_logo3').attr('src');
	}else{
		count--;
	}
	
	
	if(count >= 2){
		$('.thermos_slider_guider').css('background-color', '#EEEEEE');
		$('.thermos_slider_guider').css('border-left-color', '#000000');
	}else{
		$('.thermos_slider_guider').css('background-color', 'transparent');
		$('.thermos_slider_guider').css('border-color', 'transparent');
	}
	
	
	$('#thermos_place_logos_next').css('opacity', 1.0);
	
	$('#place_logo1_horz').fadeIn(400);
	$('#place_logo1_vert').fadeIn(400);
	$('#place_logo2_horz').fadeIn(400);
	$('#place_logo2_vert').fadeIn(400);
	$('#place_logo3_horz').fadeIn(400);
	$('#place_logo3_vert').fadeIn(400);
}

function start_after_thermos_place_logos() {
	$('.thermos_sketch_front', $('#step_thermos_place_logos')).fadeIn(400);
	$('.thermos_sketch_front_color', $('#step_thermos_place_logos')).fadeIn(400);
	$('.thermos_logo_container', $('#step_thermos_place_logos')).fadeIn(400);
	
	for(var i = 0; i < 3; i++){
		if(newImg[i] != undefined && newImg[i] != ''){
			if(logos_crop[i] != undefined && logos_crop[i] != ''){
				logo_ratio = thermos_crop_pos[i]['h'] / thermos_crop_pos[i]['w'];
			}else{
				logo_ratio = logos_dim[i]['h'] / logos_dim[i]['w'];
			}
			
			var width = 30;
			var height = logo_ratio * width;
			
			if(height > 30){
				height = 30;
				width = height / logo_ratio;
			}
			
			$('.thermos_logo' + (i + 1)).css('width', width + 'px');
			$('.thermos_logo' + (i + 1)).css('height', height + 'px');
			
			$('.thermos_logo' + (i + 1)).css('left', thermos_placement[thermos][i]['x'] + 'px');
			$('.thermos_logo' + (i + 1)).css('top', thermos_placement[thermos][i]['y'] + 'px');
			
			logo_placement[i] = new Array();
			
			logo_placement[i]['x'] = parseInt($('.thermos_logo' + (i + 1)).css('left'));
			logo_placement[i]['y'] = parseInt($('.thermos_logo' + (i + 1)).css('top'));
			logo_placement[i]['w'] = parseInt($('.thermos_logo' + (i + 1)).css('width'));
			logo_placement[i]['h'] = parseInt($('.thermos_logo' + (i + 1)).css('height'));
			
			
			$('#place_logo' + (i + 1) + '_horz').css('margin-left', thermos_containements[thermos][i]['x']);
			$('#place_logo' + (i + 1) + '_horz').css('margin-right', 300 - (thermos_containements[thermos][i]['x'] + thermos_containements[thermos][i]['w']));
			$('#place_logo' + (i + 1) + '_horz').css('width', thermos_containements[thermos][i]['w']);
			
			$('#place_logo' + (i + 1) + '_horz').slider(
				{
					'range': true,
					'min': i,
					'max': thermos_containements[thermos][i]['w'],
					'values': [thermos_placement[thermos][i]['x'] - thermos_containements[thermos][i]['x'], thermos_placement[thermos][i]['x'] - thermos_containements[thermos][i]['x'] + width],
					'slide': function(event, ui) {
						if(thermos_containements[thermos][$(this).slider("option", "min")]['x'] + ui.values[0] != logo_placement[$(this).slider("option", "min")]['x'] && ui.values[0] + logo_placement[$(this).slider("option", "min")]['w'] <= thermos_containements[thermos][$(this).slider("option", "min")]['w']){
							logo_placement[$(this).slider("option", "min")]['x'] = thermos_containements[thermos][$(this).slider("option", "min")]['x'] + ui.values[0];
							
							$(this).slider("values", 1, ui.values[0] + logo_placement[$(this).slider("option", "min")]['w']);
						}else{
							logo_placement[$(this).slider("option", "min")]['x'] = thermos_containements[thermos][$(this).slider("option", "min")]['x'] + ui.values[0];
							logo_placement[$(this).slider("option", "min")]['w'] = ui.values[1] - ui.values[0];
						}
						
						//logo_placement[$(this).slider("option", "min")]['x'] = thermos_containements[thermos][$(this).slider("option", "min")]['x'] + ui.values[0];
						//logo_placement[$(this).slider("option", "min")]['w'] = ui.values[1] - ui.values[0];
						
						$('.thermos_logo' + ($(this).slider("option", "min") + 1)).css('left', logo_placement[$(this).slider("option", "min")]['x'] + 'px');
						$('.thermos_logo' + ($(this).slider("option", "min") + 1)).css('width', logo_placement[$(this).slider("option", "min")]['w'] + 'px');
						
						$('.thermos_logo' + ($(this).slider("option", "min") + 1)).css('top', logo_placement[$(this).slider("option", "min")]['y'] + 'px');
						$('.thermos_logo' + ($(this).slider("option", "min") + 1)).css('height', logo_placement[$(this).slider("option", "min")]['h'] + 'px');
					}
				}
			);
			
			
			$('#place_logo' + (i + 1) + '_vert').css('margin-top', thermos_containements[thermos][i]['y']);
			$('#place_logo' + (i + 1) + '_vert').css('margin-bottom', 300 - (thermos_containements[thermos][i]['y'] + thermos_containements[thermos][i]['h']));
			$('#place_logo' + (i + 1) + '_vert').css('height', thermos_containements[thermos][i]['h']);
			
			$('#place_logo' + (i + 1) + '_vert').slider(
				{
					'orientation': 'vertical',
					'range': true,
					'min': i,
					'max': thermos_containements[thermos][i]['h'],
					'values': [
						thermos_containements[thermos][i]['y'] + thermos_containements[thermos][i]['h'] - (thermos_placement[thermos][i]['y'] + height),
						thermos_containements[thermos][i]['h'] - (thermos_placement[thermos][i]['y'] - thermos_containements[thermos][i]['y'])
					],
					'slide': function(event, ui) {
						if(logo_placement[$(this).slider("option", "min")]['y'] != thermos_containements[thermos][$(this).slider("option", "min")]['y'] + thermos_containements[thermos][$(this).slider("option", "min")]['h'] - ui.values[1] && ui.values[1] - logo_placement[$(this).slider("option", "min")]['h'] >= 0){
							logo_placement[$(this).slider("option", "min")]['y'] = thermos_containements[thermos][$(this).slider("option", "min")]['y'] + thermos_containements[thermos][$(this).slider("option", "min")]['h'] - ui.values[1];
							
							$(this).slider("values", 0, ui.values[1] - logo_placement[$(this).slider("option", "min")]['h']);
						}else{
							logo_placement[$(this).slider("option", "min")]['y'] = thermos_containements[thermos][$(this).slider("option", "min")]['y'] + thermos_containements[thermos][$(this).slider("option", "min")]['h'] - ui.values[1];
							logo_placement[$(this).slider("option", "min")]['h'] = ui.values[1] - ui.values[0];
						}
						
						//logo_placement[$(this).slider("option", "min")]['y'] = thermos_containements[thermos][$(this).slider("option", "min")]['y'] + (thermos_containements[thermos][$(this).slider("option", "min")]['h'] - ui.values[1]);
						//logo_placement[$(this).slider("option", "min")]['h'] = ui.values[1] - ui.values[0];
						
						$('.thermos_logo' + ($(this).slider("option", "min") + 1)).css('top', logo_placement[$(this).slider("option", "min")]['y'] + 'px');
						$('.thermos_logo' + ($(this).slider("option", "min") + 1)).css('height', logo_placement[$(this).slider("option", "min")]['h'] + 'px');
						
						$('.thermos_logo' + ($(this).slider("option", "min") + 1)).css('left', logo_placement[$(this).slider("option", "min")]['x'] + 'px');
						$('.thermos_logo' + ($(this).slider("option", "min") + 1)).css('width', logo_placement[$(this).slider("option", "min")]['w'] + 'px');
					}
				}
			);
		}
	}
}

function end_thermos_place_logos() {
	hide_thermos_place_logos();
	
	$('#place_logo1_horz').hide();
	$('#place_logo1_vert').hide();
	$('#place_logo2_horz').hide();
	$('#place_logo2_vert').hide();
	$('#place_logo3_horz').hide();
	$('#place_logo3_vert').hide();
}

$('document').ready(
	function() {
		$('#thermos_place_logos_next').click(
			function() {
				if($(this).css('opacity') == 1){
					show_next();
				}
			}
		);
		
		$('.step_header_back', $('#step_thermos_place_logos')).click(
			function() {
				reset_steps('step_thermos_place_logos');
			}
		);
	}
);