$(document).ready(function(){

	// TABS HOME 
	$('#tabsHome').tabs('#tabsHomeContent > div', {
		current: 'selected'
		, event: 'mouseover'
		, tabs: 'div'
		, effect: 'fade'
		, fadeInSpeed: 500
	})	
	

	// PNG FIX
	$('img[src*=.png]').ifixpng();
		
		
	// CREO I CANVAS VUOTI
	$(".box").backgroundCanvas();
	$(".box1").backgroundCanvas();

		// HELPER FUNCTION TO DRAW BACKGROUND FOR CONVIENIENCE
		function DrawBackground(){
			// Paints on the background canvas with the PaintFunction you must provide!
			$(".box").backgroundCanvasPaint(gradient1);
			$(".box1").backgroundCanvasPaint(gradient2);
		}

		// DRAW THE BACKGROUND ON LOAD AND RESIZE
		$(window).load(function () { DrawBackground(); });
		$(window).resize(function() { DrawBackground(); });

		// GRADIENT1
		function gradient1(context, width, height, canvas, $canvas, $canvasDiv, $content, $element) {
			var options = { x:0, height: height, width: width, radius: 10 };
			// COLORE RIEMPIMENTO A TINTA UNITA, VIENE RIMPIAZZATO DALL'EVENTUALE SFUMATURA
			context.fillStyle = "#eee";
			$.canvasPaint.roundedRect(context,options);
			// DRAW THE GRADIENT FILLED INNER RECTANGLE
			var backgroundGradient = context.createLinearGradient(0, 0, 0, height - 10);
			backgroundGradient.addColorStop(0 ,'#fff');
			backgroundGradient.addColorStop(1, '#eee');
			options.border = 1;
			context.fillStyle = backgroundGradient;
			$.canvasPaint.roundedRect(context,options);
		}	
		
		// GRADIENT2
		function gradient2(context, width, height, canvas, $canvas, $canvasDiv, $content, $element) {
			var options = { x:0, height: height, width: width, radius: 10 };
			// COLORE RIEMPIMENTO A TINTA UNITA, VIENE RIMPIAZZATO DALL'EVENTUALE SFUMATURA
			context.fillStyle = "#eee";
			$.canvasPaint.roundedRect(context,options);
			// DRAW THE GRADIENT FILLED INNER RECTANGLE
			var backgroundGradient = context.createLinearGradient(0, 0, 0, height - 10);
			backgroundGradient.addColorStop(0 ,'#A9EE45');
			backgroundGradient.addColorStop(1, '#6AA93D');
			options.border = 1;
			context.fillStyle = backgroundGradient;
			$.canvasPaint.roundedRect(context,options);
		}	


	// FACEBOX
	$("a[rel*='facebox']").facebox();
	
	// FORM CONTATTO: field highlight
	$('#contatti input.text, #contatti textarea')
		.focus(function(){
			$(this).css({ background: '#ffa' })
			.parent().css({color: '#000'})
		})
		.blur(function(){
			$(this).css({ background: '#eee' })
			.parent().css({color: '#555'})
		})
		
});