var sc = null;
var lineProps = {width: 1, color: '#ffffff', fill:'#ffffff'};
var testProps = {width: 2, color: '#00ff00', fill:'#ffffff'};
$(window).bind('load', function(){
	var pictures = $('.picture .corner, .picture-right .corner, .picture-full .corner');
	$(pictures).each(function(index){
		$(this).attr('id', 'corner_'+index );
		var sc = new SimpleCanvas('corner_'+index );
		var poly = new Array;

		if ($(this).parents().hasClass('picture-right'))
		{
			//a little bit of magic
			var dummy = $(this).parents('.description').clone();
			dummy.css(
				{position: 'absolute', left: -10000, fontSize: 16, display: 'block'}
			);
			dummy.addClass('column-one-third');
			dummy.insertAfter($('.main-layout'));
			var dHeight = dummy.height();
			dummy.remove();

			poly[0] = {x: 0, y: '100%'};
			poly[1] = {x: 31, y: '100%'};
			poly[2] = {x: 31, y: '100% - 30 - ' + dHeight };
		}
		else
		{
			//SimpleCanvas doesn't convert percentages to absolute values,
			//so count them manually
			poly[0] = {x: -30, y: '100% + 1' };
			poly[1] = {x: '100%', y: '100% + 1'};
			poly[2] = {x: '100%', y: '100% - 30'};
		}
		
		sc.drawPoly(poly, lineProps);
		
		if($.browser.msie){
			sc.repaint();
		}
		
		$(window).bind('resize', function(){
			sc.repaint();
		});
		
		$('#content-switcher').bind('click', function(){
			sc.repaint();
		});

	});
});