var sc1, sc2, sc3, sc4 = 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 allCanvas = [canvas_1, canvas_2];

	$(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);

	// var p = $('div.stretch_2 p');
	// var top = parseInt($(canvas_2).css('top'));
	// var canvas_h_1 = parseInt($('#canvas_2').height());
	// var stretch_h_2 = parseInt(p.height());
	// var diff = top - stretch_h_2;

	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 - 62));

		var canvas_2x1 = $(canvas_2).offset().left;
		var canvas_2x2 = $('div.stretch_2').offset().left;
		$(canvas_2).width(parseInt(canvas_2x2 - canvas_2x1 - 4));
		// var top_new = diff + p.height();
		// var diff_new = top_new - top;
		// $(canvas_2).css('top', top_new);
		// window.console.log(top_new, top, diff_new, canvas_h_1, $('#canvas_2').height())
		// $(canvas_2).height(canvas_h_1 - diff_new);
		//window.console.log($('div.stretch_2 p').height())
	};
	CanvasWidth();

	sc1.drawLine ({x: 0, y: 0}, {x: '100%', y: '100%'}, testProps);
	sc2.drawLine ({x: 0, y: '100%'}, {x: '100%', y: 0}, testProps);
	sc2.drawLine ({x: 132, y: '100%'}, {x: '100%', y: 0}, testProps);

		sc1.repaint();
		sc2.repaint();

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

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