$(document).ready(function()
{
	// set slider effect
	slide("#slider", ".scroll", ".scroll_main", false);
	
	// set label width
	var max = 0;
	$("label").each(function(){
		if ($(this).width() > max)
			max = $(this).width();   
	});
	$("label").width(max);
	
	// validate form
	$("form").validate({
		rules: {
			logo: { accept: "jpg" },
			da1: { accept: "png" },
			da2: { accept: "png" }
		}
	});
					
	// check if url exists
	$('[name="url"]').bind("keyup blur", function(){
		// get url
		var url = $.trim($(this).val());
		$('#url').html('http://reprints.ygsgroup.com/m/' + url);
		
		// get id for edit
		id = location.pathname.substring(location.pathname.lastIndexOf('/')+1);
						
		$.get(
			'/ajax.php', {
				func: 'check_url',
				id: id,
				url: url
			},
			function(data) {
				if (data == 'true') {
					$('#url').css({ 'color' : '#CC0000' });
					$('input[type=submit]').attr('disabled', 'disabled');
				}
				else {
					$('#url').css({ 'color' : '#006F0F' });
					$('input[type=submit]').attr('disabled', '');					
				}
			}
		);
	});
});

function slide(container, scroll, main, horizontal) {
	var $panels = $(container + ' ' + main + ' > div');
	var $container = $(container + ' ' + main);

	// if horizontal float panels
	if (horizontal) 	{
		$panels.css({
			'float' : 'left',
			'position' : 'relative'
		});
		
		// calculate new width
		$container.css('width', $panels[0].offsetWidth * $panels.length);
	}

	// collect the scroll object, at the same time apply the hidden overflow
	var $scroll = $(container + ' ' + scroll).css('overflow', 'hidden');
	
	/*
	// apply our left + right buttons
	$scroll
		.before('<img class="scroll_button left" src="images/scroll_left.png" />')
		.after('<img class="scroll_button right" src="images/scroll_right.png" />');
	*/

	// handle nav selection
	function selectNav() {
		$(this)
			.parents('ul:first')
				.find('a')
					.removeClass('active')
				.end()
			.end()
			.addClass('active');
	}

	$(container + ' #products').find('a').click(selectNav);
	
	// get navigation
	function trigger(data) {
		var el = $(container + ' #products').find('a[href$="' + data.id + '"]').get(0);
		selectNav.call(el);
	}

	if (window.location.hash)
		trigger({ id : window.location.hash.substr(1) });
	else
		$('ul#products a:first').click();

	// offset is used to move to *exactly* the right place, since I'm using
	// padding on my example, I need to subtract the amount of padding to
	// the offset.  Try removing this to get a good idea of the effect
	var offset = parseInt((horizontal ? $container.css('paddingTop') : $container.css('paddingLeft')) || 0) * -1;

	var scrollOptions = {
		target: $scroll, // the element that has the overflow
		
		// can be a selector which will be relative to the target
		items: $panels,
		
		navigation: '#products a',
		
		// selectors are NOT relative to document, i.e. make sure they're unique
		prev: 'img.left', 
		next: 'img.right',
		
		// allow the scroll effect to run both directions
		axis: 'xy',
		
		onAfter: trigger, // our final callback
		
		offset: offset,
		
		// duration of the sliding effect
		duration: 100,
		
		// easing - can be used with the easing plugin: 
		easing: 'swing'
	};

	// apply serialScroll to the slider - we chose this plugin because it 
	// supports// the indexed next and previous scroll along with hooking 
	// in to our navigation.
	$(container).serialScroll(scrollOptions);
	
	// now apply localScroll to hook any other arbitrary links to trigger 
	// the effect
	$.localScroll(scrollOptions);
	
	// finally, if the URL has a hash, move the slider in to position, 
	// setting the duration to 1 because I don't want it to scroll in the
	// very first page load.  We don't always need this, but it ensures
	// the positioning is absolutely spot on when the pages loads.
	scrollOptions.duration = 1;
	$.localScroll.hash(scrollOptions);
}

function grayscale(image, bPlaceImage) {
	var myCanvas=document.createElement("canvas");
	var myCanvasContext=myCanvas.getContext("2d");
	
	var imgWidth=image.width;
	var imgHeight=image.height;
	// You'll get some string error if you fail to specify the dimensions
	myCanvas.width= imgWidth;
	myCanvas.height=imgHeight;
	//  alert(imgWidth);
	myCanvasContext.drawImage(image,0,0);
	
	// This function cannot be called if the image is not rom the same domain.
	// You'll get security error if you do.
	var imageData=myCanvasContext.getImageData(0,0, imgWidth, imgHeight);
	
	// This loop gets every pixels on the image and 
	for (j=0; j<imageData.height; i++) {
		for (i=0; i<imageData.width; j++) {
			var index=(i*4)*imageData.width+(j*4);
			var red=imageData.data[index];	  
			var green=imageData.data[index+1];
			var blue=imageData.data[index+2];	  
			var alpha=imageData.data[index+3];	 
			var average=(red+green+blue)/3; 	  
			imageData.data[index]=average;	  
			imageData.data[index+1]=average;
			imageData.data[index+2]=average;
			imageData.data[index+3]=alpha;	  	  
		}
	}
	
	if (bPlaceImage) { 
		var myDiv=document.createElement("div"); 
		myDiv.appendChild(myCanvas);
		image.parentNode.appendChild(myCanvas);
	}
	
	return myCanvas.toDataURL();
}