$(document).ready(function(){

	/*alert($('#el12').css('opacity', 0.3));
	alert($('#el12').css('opacity'));*/

	$('#el1').click(function() {
		$('#el1').gx({'width': 200, 'height': 200, 'border-width': 8}, 2000, 'Linear', function(el) { el.html('Completed!'); });
	});
	
	$('#el2').click(function() {
		$('#el2').gx({'width': 200, 'height': 200, 'color': 'red', 'background-color': '#ff00ff', 'border-width': 8, 'border-color': '#fa0'}, 4000, 'Back', function(el) { el.html('Completed!'); });
	});
	
	$('#el3').click(function() {
		$('#el3').gx({'width': 300, 'height': 300, 'font-size': 20}, 4000, 'Bounce:InOut', function(el) { el.html('Completed!'); });
	});
	
	$('#el4').click(function() {
		$('#el4').gx({'width': '+=300px', 'height': '+=300px', 'font-size': '+=20px'}, 4000, 'Elastic');
	});
	
	$('#el5').click(function() {
		$('#el5').gx({'width': '200px', 'height': '200px', 'font-size': '4em'}, 4000, 'Elastic');
	});
	
	$('#el6').gxInit({queue: 'cancel'});
	
	$('#el6').hover(function() {
		$('#el6').gx({'width': 500, 'font-size': 18}, 4000, 'Bounce');
	}, function() {
		$('#el6').gx({'width': 100, 'font-size': 12}, 400, 'Linear');
	});
	
	$('#el7').gxInit({queue: 'cancel'});
	
	$('#el7').hover(function() {
		$('#el7').gx({'width': 500}, 4000, 'Linear');
	}, function() {
		$('#el7').gx({'width': 100}, 400, 'Linear');
	});
	
	$('#el8').click(function() {
		$('#el8').gx({'width': 400, 'height': 300, 'background-color': '#f0f'}, 4000, 'Linear')
				 .gx({'width': 140, 'height': 440, 'background-color': '#ff0'}, 2000, 'Linear')
				 .gx({'width': 100, 'height': 100, 'background-color': '#06C'}, 4000, 'Linear');
	});
	
	$('#el9').click(function() {
		$('#el9').gx({'width': '400px', 'font-size': '20px'}, 4000, 'Bounce');
	});
	
	$('#pause_9').click(function() {
		$('#el9').gx('pause');
	});
	
	$('#resume_9').click(function() {
		$('#el9').gx('resume');
	});
	
	$('#el10').click(function() {
		$('#el10').gx({'width': '400px', 'font-size': '20px', 'background-color': '#f0f'}, 4000, 'Linear', {
			start: function(el) { el.html('Start!'); },
			complete: function(el) { el.html('Complete!'); }
		});
	});
	
	$('#el11').click(function() {
		$('#el11').gx({'width': '400px', 'font-size': '20px', 'background-color': '#f0f'}, 4000, 'Bounce', function(el) {
			el.html('Complete!');
		});
	});
	
	$('#el12').click(function() {
		$('#el12').gx({opacity: 'toggle'})
				  .gx({opacity: 'toggle'})
				  .gx({opacity: 'toggle'})
				  .gx({opacity: 'toggle'})
				  .gx({opacity: 'toggle'})
				  .gx({opacity: 'toggle'});
	});
	
	$('#el13').gxInit({delay: 2000});
	$('#el13').click(function() {
		$('#el13').gx({height: 'toggle'})
				  .gx({height: 'toggle'})
				  .gx({height: 'toggle'})
				  .gx({height: 'toggle'})
				  .gx({height: 'toggle'})
				  .gx({height: 'toggle'});
	});
	
	$('#el14').click(function() {
		$('#el14').gx({width: 'toggle'})
				  .gx({width: 'toggle'})
				  .gx({width: 'toggle'})
				  .gx({width: 'toggle'})
				  .gx({width: 'toggle'})
				  .gx({width: 'toggle'});
	});
	
	$('#el15').click(function() {
		$('#el15').gx({'top': '-=40'}, 200)
				 .gx({'top': '+=180'}, 1000)
				 .gx({'left': '-=40'}, 200)
				 .gx({'left': '+=480'}, 1000)
				 .gx({'top': '+=40'}, 200)
				 .gx({'top': '0'}, 1000)
				 .gx({'left': '+=40'}, 200)
				 .gx({'left': '0'}, 1000); 
		
	});
	
	var delay = 2000;
	$('#el18').gxInit({delay: delay});
	
	var setText = function() {
		$('#el18').html('Wait ' + delay + ' ms...');
	};
	
	var setText = function() {
		$('#el18').html('Completed');
	};
	
	$('#el18').click(function() {
		$('#el18').gx({'width': '200px'}, 4000, 'Bounce', setText)
				  .gx({'height': '20px'}, 2000, 'Linear', setText)
				  .gx({'left': '180px'}, 1800, 'Bounce', setText)
				  .gx({'left': '0px'}, 1800, 'Bounce', setText)
				  .gx({'width': '100px'}, 2000, 'Linear', setTextEnd);
	});
});