$(function() {
	
	// uploadify
    $('#upload').fileUpload({ 
	  uploader:  '/swf/uploader.swf', 
	  script:    '/good-life/upload',
	  folder: '/upload',
	  browseText: 'Upload',
	  fileExt: '*.jpg;*.jpeg;*.png;*.gif;',
	  fileDesc: 'Select a photo with Gregory\'s products in it.',
	  scriptData: {'sid': $('#sid').val() },
	  auto: 'true',
	  cancelImg: '/img/cancel.png',
	  onComplete: function (event, queueId, fileObj, data, fileInfo)
		{
			$('#cropper').html(data);
			
			$('#uploader').fadeOut().queue(function() {
				$('#cropper').show().fadeIn();
			});
			
			$('#coords-x1').val(0);	
			$('#coords-y1').val(0);
			$('#coords-x2').val(0);
			$('#coords-y2').val(0);
			
			initCrop();
		}
	});
	
	
	function initCrop() {
		//cropper options
		var options = {
			allowZoom: true,
			allowPan: true,
			viewportWidth: 578,
			viewportHeight: 443,			
			callback: function(topX, topY, bottomX, bottomY) {
				if(!isNaN(topX) || !isNaN(topY) && !isNaN(bottomX) && !isNaN(bottomY)) {
					$('#coords-x1').val(topX);	
					$('#coords-y1').val(topY);
					$('#coords-x2').val(bottomX);
					$('#coords-y2').val(bottomY);		
				}
			}
		};
		
		options.topX = $('#coords-x1').val() == 0 ? -1 : $('#coords-x1').val();
		options.topY = $('#coords-y1').val() == 0 ? -1 : $('#coords-y1').val();
		options.bottomX = $('#coords-x2').val() == 0 ? -1 : $('#coords-x2').val();
		options.bottomY = $('#coords-y2').val() == 0 ? -1 : $('#coords-y2').val();

		var image = $('.panzoom').imagetool(options);	

		$('#setCrop').click(function() {
			var params = '&x1=' + $('#coords-x1').val() + 
			 			'&y1=' + $('#coords-y1').val() + 
			            '&x2=' + $('#coords-x2').val() +
			 			'&y2=' + $('#coords-y2').val();
			$.ajax({
				data: params,
				type: 'post',
				url: '/good-life/crop',
				beforeStart: function(data) {
					$('#crop_message').fadeIn().text('cropping...');
				},
				success: function(data) {
					$('.orig').attr('src', data).fadeIn();
					$('#cropper').removeClass('editing');
					$('#crop_message').text('done').fadeOut();
				}
			});



			return false;
		});	
		
		var slideValue = 0;
		$("#vertical-zoom").slider({
			orientation: "vertical",
			range: "min",
			min: 0,
			max: 100,
			value: 60,
			slide: function(event, ui) {
			   $('.panzoom').slideZoom(ui.value);
			   slideValue = ui.value;
			}
		});
	}

	initCrop();
	
	$('#submit').click(function() {
		var params = '&x1=' + $('#coords-x1').val() + 
		 			'&y1=' + $('#coords-y1').val() + 
		            '&x2=' + $('#coords-x2').val() +
		 			'&y2=' + $('#coords-y2').val();
		$.ajax({
			data: params,
			type: 'post',
			url: '/good-life/crop',
			beforeStart: function(data) {
				$('#crop_message').fadeIn().text('cropping...');
			},
			success: function(data) {
				
			}
		});	
		
		return true;
	});
	
	$('#product_id').after('<div id="productPreview"></div>');
	$('#product_id').change(function(e) {
		var val = $(this).val();
		
		$.ajax({
			url: '/good-life/preview-product/id/'+val,
			success: function(data) {
				$('#productPreview').html(data);
			}
		});
	});
	
});


$(window).load(function() {
	
	if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("geolocation"));

		if($('#lat').val() != 0 || $('#lon').val() != 0) {
			var point = new GLatLng($('#lat').val(), $('#lon').val());
		} else {
			var point = new GLatLng(37.4419, -122.1419);
			$('#lat').val('37.4419');
			$('#lon').val('-122.1419');
		}
		
        map.setCenter(point, 7);
        map.setUIToDefault();
		map.setMapType(G_PHYSICAL_MAP);
		
		map.addOverlay(createMarker(point, 1));
      }


	  function createMarker(point, number) {
  	      var marker = new GMarker(point, {draggable: true});
  	      marker.value = number;
 
  		  GEvent.addListener(marker, "dragend", function() {
  			   point = marker.getLatLng();
  		  	   document.getElementById("lat").value=point.y;
  		       document.getElementById("lon").value=point.x;
  		  });
  
  	      return marker;
  	  }
	  	  
  		var i = 1;
  		// Recenter Map and add Coords by clicking the map
  		GEvent.addListener(map, 'click', function(overlay, point) {
  			 map.clearOverlays();
  			 map.addOverlay(createMarker(point, i + 1));
  
  		     document.getElementById("lat").value=point.y;
  		     document.getElementById("lon").value=point.x;
  			 i++;
  		});
});