var sc1, sc2, sc3 = null;

var testProps = {width: 0.2, color: '#a8a8a8'};
if($.browser.msie){
	var testProps = {width: 0.2, color: '#555'};
}
$(window).bind('load', function(){
	var canvas_1 = document.createElement('div');
	var canvas_2 = document.createElement('div');
	var canvas_3 = document.createElement('div');
	var allCanvas = [canvas_1, canvas_2, canvas_3];
	
	$(allCanvas).each(function(i){
		var n = i + 1;
		$(this).addClass('canvas').attr('id','canvas_'+ n);
	});
	
	$('div.plan div.img').append($(allCanvas));
	sc1 = new SimpleCanvas(canvas_1);
	sc2 = new SimpleCanvas(canvas_2);
	sc3 = new SimpleCanvas(canvas_3);
	
	function CanvasWidth(){
		var canvas_1x1 = $(canvas_1).offset().left + $(canvas_1).width();
		var canvas_1x2 = $('div.stretch_1').offset().left;
		$(canvas_1).width(parseInt(canvas_1x1 - canvas_1x2 - 30));
		var canvas_2x1 = $(canvas_2).offset().left;
		var canvas_2x2 = $('div.stretch_2').offset().left;
		$(canvas_2).width(parseInt(canvas_2x2 - canvas_2x1 - 4));
	};
	CanvasWidth();
	
	sc1.drawLine ({x: 0, y: 0}, {x: '100%', y: '100%'}, testProps);
	sc2.drawLine ({x: 0, y: '100%'}, {x: '100%', y: 0}, testProps);
	sc3.drawLine ({x: 0, y: 0}, {x: '100%', y: '100%'}, testProps);
	
		sc1.repaint();
		sc2.repaint();
		sc3.repaint();

	$(canvas_1).css('zoom', 1);
	$(canvas_2).css('zoom', 1);
	$(canvas_3).css('zoom', 1);

	$(window).bind('resize', function(){
		CanvasWidth();
		sc1.repaint();
		sc2.repaint();
		sc3.repaint();
	});
});