var sc1, sc2, sc3, sc4, sc5 = null;

var lineProps = {width: 0.2, color: '#a8a8a8'};
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 canvas_4 = document.createElement('div');
	var canvas_5 = document.createElement('div');
	var allCanvas = [canvas_1, canvas_2, canvas_3, canvas_4, canvas_5];
	
	$(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);
	sc4 = new SimpleCanvas(canvas_4);
	sc5 = new SimpleCanvas(canvas_5);
	
	function CanvasWidth(){
		var canvas_2x1 = $(canvas_2).offset().left;
		var canvas_2x2 = $('div.stretch_3').offset().left;
		$(canvas_2).width(parseInt(canvas_2x2 - canvas_2x1 - 2));
		var canvas_5x1 = $(canvas_5).offset().left;
		var canvas_5x2 = $('div.stretch_2').offset().left;
		$(canvas_5).width(parseInt(canvas_5x2 - canvas_5x1 - 2));
	};
	CanvasWidth();
	
	sc1.drawLine ({x: 0, y: 0}, {x: '100%', y: '100%'}, testProps);
	sc2.drawLine ({x: 0, y: 0}, {x: '100%', y: '100%'}, testProps);
	sc3.drawLine ({x: 0, y: '100%'}, {x: '100%', y: 0}, testProps);
	sc4.drawLine ({x: 0, y: 0}, {x: '100%', y: '100%'}, testProps);
	sc5.drawLine ({x: 0, y: 0}, {x: '100%', y: '100%'}, testProps);

		sc1.repaint();
		sc2.repaint();
		sc3.repaint();
		sc4.repaint();
		sc5.repaint();

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

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