var current_item;
	
function skew_panel(){

	var panelEl = $('.note');
	panelEl.each(function(){
		jCommon.support.svg ? createSvg(this) : createVml(this);
	});
	
	function createSvg(el) {
		var parent = $(el);

		var svgEl = document.createElementNS(jCommon.ns.svg, 'svg');
		svgEl.setAttribute('version', '1.1');
		svgEl.setAttribute('width', '100%');
		svgEl.setAttribute('height', $(el).height()+'px');
		svgEl.setAttribute('class', 'shape');
		el.appendChild(svgEl);

		if (parent.hasClass('gradient')){
			var defEl = document.createElementNS(jCommon.ns.svg, 'def');
			svgEl.appendChild(defEl);

			var gradientEl = document.createElementNS(jCommon.ns.svg, 'linearGradient');
			gradientEl.setAttribute('id', parent.hasClass('yellow') ? 'g1' : 'g2');
			gradientEl.setAttribute('x1', '0');
			gradientEl.setAttribute('y1', '0');
			gradientEl.setAttribute('x2', '0');
			gradientEl.setAttribute('y2', '100%');
			defEl.appendChild(gradientEl);

			var startColor = parent.hasClass('yellow') ? '#fcd910' : '#bcfb4a';
			var endColor = parent.hasClass('yellow') ? '#bc4403' : '#188d06';

			var stop1El = document.createElementNS(jCommon.ns.svg, 'stop');
			stop1El.setAttribute('offset', '0');
			stop1El.setAttribute('stop-color', startColor);
			gradientEl.appendChild(stop1El);

			var stop2El = document.createElementNS(jCommon.ns.svg, 'stop');
			stop2El.setAttribute('offset', '100%');
			stop2El.setAttribute('stop-color', endColor);
			gradientEl.appendChild(stop2El);
		}

		var shapeEl = document.createElementNS(jCommon.ns.svg, 'rect');
		shapeEl.setAttribute('y', 0);
		shapeEl.setAttribute('width', '93%');
		shapeEl.setAttribute('height', '100%');
		shapeEl.setAttribute('rx', '7');
		shapeEl.setAttribute('ry', '7');
		if (parent.hasClass('back')){
			shapeEl.setAttribute('x', 10);
			shapeEl.setAttribute('transform', 'skewX(-10)');
		}
		else{
			shapeEl.setAttribute('x', 0);
			shapeEl.setAttribute('transform', 'skewX(10)');
		}

		if (parent.hasClass('gradient')){
			shapeEl.setAttribute('fill', parent.hasClass('yellow') ? 'url(#g1)' : 'url(#g2)');
		}
		else{
			parent.hasClass('selected') ? shapeEl.setAttribute('fill', '#F7EED7') : shapeEl.setAttribute('fill', '#e3eb20');
			
			if(parent.hasClass('selected')){
				current_item = parent;
			}
		}

		svgEl.appendChild(shapeEl);
	}

	function createVml(el){
		var parent = $(el);
		var rect_width = panelEl.width();
		var rect_height = panelEl.height();
		var start_x = parent.hasClass('back') ? 0 : 10;
		var startColor;
		if(parent.hasClass('selected')){
			current_item = parent;
			startColor = '#F7EED7';
		}
		else if(parent.hasClass('gradient')){
			startColor = parent.hasClass('yellow') ? '#fcd910' : '#bcfb4a';
			endColor = parent.hasClass('yellow') ? '#bc4403' : '#188d06';
		}
		else{
			startColor = '#e3eb20';
		}
		var shapeEl = $(document.createElement('v:shape')).addClass('vml shape').css({
				height: rect_height,
				left: 0,
				position: 'absolute',
				top: '-1px',
				width: rect_width
			}).attr({
				fillcolor: startColor,
				stroked: false,
				coordsize: rect_width+', '+rect_height,
				path: 'm ' + start_x + ',5 qy ' + (start_x+5) + ',0 l ' + (rect_width-5) + ',0 qx ' + rect_width +',5 l ' + rect_width +',' + (rect_height-5) + ' qy ' + (rect_width-5) + ',' + rect_height + ' l ' + (start_x+5) + ',' + rect_height + ' qx ' + start_x + ',' + (rect_height-5) + ' l ' + start_x + ',5'
			});

		if(parent.hasClass('gradient')){
			var gradEl = $(document.createElement('v:fill')).addClass('vml shape').attr({
					color2: endColor,
					type: 'gradient'
				});
			gradEl.prependTo(shapeEl);
		}

		var skewEl = $(document.createElement('o:skew')).addClass('vml').attr({
				on: 'true',
				offset: '0,0',
				matrix: parent.hasClass('back')  ? '1,-0.2,0,1,0,0' : '1,0.2,0,1,0,0'
			});
		skewEl.prependTo(shapeEl);

		shapeEl.prependTo(el);
	}
}

function updateVml(){
	panelEl = $('.note');
	panelEl.each(function(){
		var
			me = $(this),
			shape = me.find('.shape');
			
		shape.css({
			width: me[0].offsetWidth,
			height: me[0].offsetHeight
		});
	})
}


$( function() {
	skew_panel();
	updateVml();
	jCommon.measurer.bind(updateVml);
});