/*----------------------------------------------------------------
** GET CALCULATED STYLE FROM DOM ELEMENTS **
----------------------------------------------------------------*/
function GetStyle(oElm, strCssRule) {
	var strValue = "";
	if (document.defaultView && document.defaultView.getComputedStyle) {
		strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
	}
	else if (oElm.currentStyle) {
		strCssRule = strCssRule.replace(/\-(\w)/g, function(strMatch, p1) {
			return p1.toUpperCase();
		});
		strValue = oElm.currentStyle[strCssRule];
	}
	return strValue;
};


/*----------------------------------------------------------------
** SET TAB ARROW **
----------------------------------------------------------------*/
$('.menuTabs .ui-tabs-selected a').livequery(
	function() {
		if (!!document.createElement('canvas').getContext) {
			var height = $(this).height() / 2.6;
			var width = height * 1.2;

			// set HTML 5 canvas with arrow
			var canvas = $('<canvas style="z-index: 1; position: relative; left: 50%; display: block; float: left; clear: left; margin-top: -1px; margin-left: -' + width / 2 + 'px;" width="' + width + '" height="' + height + '" class="arrowPlaceHolder"></canvas>');
			$(this).after(canvas);

			var context = canvas.get(0).getContext("2d");
			context.fillStyle = GetStyle(this, 'background-color');
			canvas.get(0).style['background'] = 'transparent';

			context.beginPath();
			context.moveTo(0, 0);
			context.lineTo(width / 2, height);
			context.lineTo(width, 0);
			context.lineTo(0, 0);
			context.fill();

			context.strokeStyle = GetStyle(this, 'border-top-color');
			context.lineWidth = 1;
			context.beginPath();
			context.moveTo(0, 0);
			context.lineTo(width / 2, height);
			context.lineTo(width, 0);
			context.stroke();
		}
		else {
			// do this if browsers do not support HTML 5
			var image = $('<div class="arrow"></div>');
			$(this).after(image);
		}
	}, function() {
		$(this).next().remove();
	}
);