var logo_ratio = 1;
var logo_x = 0;
var logo_y = 0;
var logo_w = 0;
var logo_h = 0;


var placement = new Array();

placement['bag1'] = new Array();
placement['bag1']['x'] = 125;
placement['bag1']['y'] = 97;

placement['bag2'] = new Array();
placement['bag2']['x'] = 132;
placement['bag2']['y'] = 164;

placement['bag3'] = new Array();
placement['bag3']['x'] = 121;
placement['bag3']['y'] = 170;

placement['bag4'] = new Array();
placement['bag4']['x'] = 121;
placement['bag4']['y'] = 145;


var containements = new Array();

containements['bag1'] = new Array();
containements['bag1']['x'] = 98;
containements['bag1']['y'] = 75;
containements['bag1']['w'] = 100;
containements['bag1']['h'] = 151;

containements['bag2'] = new Array();
containements['bag2']['x'] = 81;
containements['bag2']['y'] = 150;
containements['bag2']['w'] = 148;
containements['bag2']['h'] = 64;

containements['bag3'] = new Array();
containements['bag3']['x'] = 62;
containements['bag3']['y'] = 148;
containements['bag3']['w'] = 170;
containements['bag3']['h'] = 94;

containements['bag4'] = new Array();
containements['bag4']['x'] = 74;
containements['bag4']['y'] = 127;
containements['bag4']['w'] = 147;
containements['bag4']['h'] = 80;


var newImg = new Image();

function hide_bag_place_logo() {
	$('.sketch_front_sketch', $('#step_bag_place_logo')).hide();
	$('.sketch_front_colora', $('#step_bag_place_logo')).hide();
	$('.sketch_front_colorb', $('#step_bag_place_logo')).hide();
	$('.sketch_front_colorc', $('#step_bag_place_logo')).hide();
	$('.sketch_front_colord', $('#step_bag_place_logo')).hide();
	$('.sketch_front_colore', $('#step_bag_place_logo')).hide();
	$('.sketch_front_colorf', $('#step_bag_place_logo')).hide();
	$('.sketch_front_colorg', $('#step_bag_place_logo')).hide();
	$('.sketch_front_colorh', $('#step_bag_place_logo')).hide();
	$('.sketch_logo_container', $('#step_bag_place_logo')).hide();
}

function reset_bag_place_logo() {
	hide_bag_place_logo();
	
	logo_x = 0;
	logo_y = 0;
	logo_w = 0;
	logo_h = 0;
	
	$('#place_logo_horz').hide();
	$('#place_logo_vert').hide();
}

function start_before_bag_place_logo() {
	$('.sketch_logo_container').html('<IMG CLASS="sketch_logo">');
	
	if(logo_crop == ''){
		$('.sketch_logo').attr('src', 'upl/' + logo);
	}else{
		$('.sketch_logo').attr('src', 'upl/' + logo_crop);
	}
	
	newImg.src = $('.sketch_logo').attr('src');
	
	$('#bag_place_logo_next').css('opacity', 1.0);
	
	$('#place_logo_horz').fadeIn(400);
	$('#place_logo_vert').fadeIn(400);
}

function start_after_bag_place_logo() {
	$('.sketch_front_sketch', $('#step_bag_place_logo')).fadeIn(400);
	$('.sketch_front_colora', $('#step_bag_place_logo')).fadeIn(400);
	$('.sketch_front_colorb', $('#step_bag_place_logo')).fadeIn(400);
	$('.sketch_front_colorc', $('#step_bag_place_logo')).fadeIn(400);
	$('.sketch_front_colord', $('#step_bag_place_logo')).fadeIn(400);
	$('.sketch_front_colore', $('#step_bag_place_logo')).fadeIn(400);
	$('.sketch_front_colorf', $('#step_bag_place_logo')).fadeIn(400);
	$('.sketch_front_colorg', $('#step_bag_place_logo')).fadeIn(400);
	$('.sketch_front_colorh', $('#step_bag_place_logo')).fadeIn(400);
	$('.sketch_logo_container', $('#step_bag_place_logo')).fadeIn(400);
	
	if(logo_crop != undefined && logo_crop != ''){
		logo_ratio = crop_pos['h'] / crop_pos['w'];
	}else{
		logo_ratio = logo_dim['h'] / logo_dim['w'];
	}
	
	var width = 50;
	var height = logo_ratio * width;
	
	if(height > 50){
		height = 50;
		width = height / logo_ratio;
	}
	
	$('.sketch_logo').css('width', width + 'px');
	$('.sketch_logo').css('height', height + 'px');
	
	$('.sketch_logo').css('left', placement[bag]['x'] + 'px');
	$('.sketch_logo').css('top', placement[bag]['y'] + 'px');
	
	
	logo_x = parseInt($('.sketch_logo').css('left'));
	logo_w = parseInt($('.sketch_logo').css('width'));
	
	logo_y = parseInt($('.sketch_logo').css('top'));
	logo_h = parseInt($('.sketch_logo').css('height'));
	
	
	$('#place_logo_horz').css('margin-left', containements[bag]['x']);
	$('#place_logo_horz').css('margin-right', 300 - (containements[bag]['x'] + containements[bag]['w']));
	$('#place_logo_horz').css('width', containements[bag]['w']);
	
	$('#place_logo_horz').slider(
		{
			'range': true,
			'min': 0,
			'max': containements[bag]['w'],
			'values': [placement[bag]['x'] - containements[bag]['x'], placement[bag]['x'] - containements[bag]['x'] + width],
			'slide': function(event, ui) {
				if(containements[bag]['x'] + ui.values[0] != logo_x && ui.values[0] + logo_w <= containements[bag]['w']){
					logo_x = containements[bag]['x'] + ui.values[0];
					
					$(this).slider("values", 1, ui.values[0] + logo_w);
				}else{
					logo_x = containements[bag]['x'] + ui.values[0];
					logo_w = ui.values[1] - ui.values[0];
				}
				
				$('.sketch_logo').css('left', logo_x + 'px');
				$('.sketch_logo').css('width', logo_w + 'px');
				
				$('.sketch_logo').css('top', logo_y + 'px');
				$('.sketch_logo').css('height', logo_h + 'px');
			}
		}
	);
	
	
	$('#place_logo_vert').css('margin-top', containements[bag]['y']);
	$('#place_logo_vert').css('margin-bottom', 300 - (containements[bag]['y'] + containements[bag]['h']));
	$('#place_logo_vert').css('height', containements[bag]['h']);
	
	$('#place_logo_vert').slider(
		{
			'orientation': 'vertical',
			'range': true,
			'min': 0,
			'max': containements[bag]['h'],
			'values': [
				containements[bag]['y'] + containements[bag]['h'] - (placement[bag]['y'] + height),
				containements[bag]['h'] - (placement[bag]['y'] - containements[bag]['y'])
			],
			'slide': function(event, ui) {
				if(logo_y != containements[bag]['y'] + containements[bag]['h'] - ui.values[1] && ui.values[1] - logo_h >= 0){
					logo_y = containements[bag]['y'] + containements[bag]['h'] - ui.values[1];
					
					$(this).slider("values", 0, ui.values[1] - logo_h);
				}else{
					logo_y = containements[bag]['y'] + containements[bag]['h'] - ui.values[1];
					logo_h = ui.values[1] - ui.values[0];
				}
				
				$('.sketch_logo').css('top', logo_y + 'px');
				$('.sketch_logo').css('height', logo_h + 'px');
				
				$('.sketch_logo').css('left', logo_x + 'px');
				$('.sketch_logo').css('width', logo_w + 'px');
			}
		}
	);
}

function end_bag_place_logo() {
	hide_bag_place_logo();
	
	$('#place_logo_horz').hide();
	$('#place_logo_vert').hide();
}

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