var sc1, sc2, sc3, sc4, sc5 = 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 canvas_4 = document.createElement('div');	
	var canvas_5 = document.createElement('div');
	var canvas_6 = document.createElement('div');	
	var allCanvas = [canvas_1, canvas_2, canvas_3, canvas_4, canvas_5, canvas_6];
	
	$(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);
	sc6 = new SimpleCanvas(canvas_6);
	
	function CanvasWidth(){
		var canvas_1x1 = $(canvas_1).offset().left + $(canvas_1).width();
		var canvas_1x2 = $('div.stretch_2').offset().left;
		$(canvas_1).width(parseInt(canvas_1x1 - canvas_1x2 - 35));
		
		var canvas_3x1 = $(canvas_3).offset().left;
		var canvas_3x2 = $('div.stretch_3').offset().left;
		$(canvas_3).width(parseInt(canvas_3x2 - canvas_3x1 + 19));
		
		var canvas_6x1 = $(canvas_6).offset().left + $(canvas_6).width();
		var canvas_6x2 = $('div.stretch_3').offset().left;
		$(canvas_6).width(parseInt(canvas_6x1 - canvas_6x2 - 17));
		
		var canvas_4x1 = $(canvas_4).offset().left;
		var canvas_4x2 = $('div.stretch_4').offset().left;
		$(canvas_4).width(parseInt(canvas_4x2 - canvas_4x1 - 3));
		
		var canvas_5x1 = $(canvas_5).offset().left;
		var canvas_5x2 = $('div.stretch_5').offset().left;
		$(canvas_5).width(parseInt(canvas_5x2 - canvas_5x1));
	};
	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);	
	sc6.drawLine ({x: 0, y: '100%'}, {x: '100%', y: 0}, testProps);	
	sc4.drawLine ({x: 0, y: 47}, {x: '100%', y: 0}, testProps);
	sc4.drawLine ({x: 224, y: '100%'}, {x: '100%', y: 0}, testProps);
	sc5.drawLine ({x: 0, y: 0}, {x: '100%', y: '100%'}, testProps);	
	
		sc1.repaint();
		sc2.repaint();
		sc3.repaint();
		sc4.repaint();
		sc5.repaint();
		sc6.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);
	$(canvas_6).css('zoom', 1);

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