var R1,R2, R3;
var separatorH = 10;
var div3;
var A, B, C, D, E, F, G;
var mRadius;
if(!doformIconColor)
	var doformIconColor = '#136792';

$(document).ready(function(){
	var iconColor;
	if(doformIconColor){
		iconColor = doformIconColor;
	}else{
		iconColor = '#136792';
	}
	if(authNS.currentUser && authNS.currentUser.mmbMenuIconColor){
		iconColor = authNS.currentUser.mmbMenuIconColor;
	}
	//var mainMenuCanvas = document.getElementById("mainMenuIcon");
	//drawMainMenuIcon(mainMenuCanvas, iconColor);
	var pageIconCanvas = document.getElementById("pageMenuIcon");
	// drawPageIcon(pageIconCanvas, iconColor); // CO-2051 remove draw icon
	//var fullScreenIconCanvas = document.getElementById("fvFullScreen");
	//drawFVFullScreenIcon(fullScreenIconCanvas, iconColor);
	if(isFullScreen()){
		$('#fvmain_menu li.liFvFullScreen .fvFullScreen').addClass('fullMode');
	}else{
		$('#fvmain_menu li.liFvFullScreen .fvFullScreen').removeClass('fullMode');
	}
});

function drawMainMenuIcon(canvas, color){
	if(!canvas){
		return;
	}
	
	var ctx = canvas.getContext("2d");
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	
	init(canvas.width, canvas.height);
	var radius = Math.floor(R1.height / 2);
	var radiusy = Math.floor(R1.height / 2);
	drawRoundRect(ctx, R1, radius, radiusy, color);
	drawRoundRect(ctx, R2, radius, radiusy, color);
	drawRoundRect(ctx, R3, radius, radiusy, color);
}

function init(width, height){
	separatorH = 2.5;//height/20;
	div3 = (height-(separatorH*2))/3;
	R1 = {
		x:0,
		y:0,
		width:width,
		height:div3
	};
	var offset = Math.floor(div3+separatorH);
	R2 = {
		x:0,
		y:offset,
		width:width,
		height:div3
	};
	R3 = {
		x:0,
		y:2*offset,
		width:width,
		height:div3
	};
}
function drawRoundRect1(ctx, rect, radiusx,  radiusy, color){
   ctx.beginPath();
   ctx.lineWidth = 1;
   ctx.strokeStyle = color;
   ctx.moveTo(rect.x + radiusx, rect.y + 0.5);
   ctx.lineTo(rect.x + rect.width - radiusx, rect.y + 0.5);
   ctx.quadraticCurveTo(rect.x + rect.width, rect.y, rect.x + rect.width, rect.y + radiusy);
   if((rect.y + rect.height - radiusy) > (rect.y + radiusy)){
	  ctx.lineTo(rect.x + rect.width, rect.y + rect.height - radiusy);
   }
   ctx.quadraticCurveTo(rect.x + rect.width, rect.y + rect.height, rect.x + rect.width - radiusx, rect.y + rect.height);
   ctx.lineTo(rect.x + radiusx, rect.y + rect.height + 0.5);

   ctx.quadraticCurveTo(rect.x, rect.y + rect.height, rect.x, rect.y + rect.height - radiusy);
   ctx.lineTo(rect.x, rect.y + radiusy);
   ctx.quadraticCurveTo(rect.x, rect.y, rect.x + radiusx, rect.y);
   //ctx.fillStyle=color;
   //ctx.fill();
   ctx.stroke();
}

function drawPageIcon(canvas, color){
	if(!isWebClient){
		color = '#136792';
	}
	if(!canvas){
		return;
	}
	var ctx = canvas.getContext("2d");
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	
	initPageIcon(canvas.width, canvas.height);
	pathPoligon1(ctx, color);
	
	//pathPoligon2(ctx, "#FFFFFF");

	pathPoligon3(ctx, "#999890");
}

function createPoint(x, y){
	return {
		x:x,
		y:y
	}
}

function initPageIcon(width, height){
	/*
	 *  A_______________B
	 *  |               |
	 *  |               |
	 *  |               G
	 *  |               |
	 *  |    F          |
	 *  |               |
	 *  D______E________C
	 *
	 */
	mRadius=4;
	A = createPoint(0, 0);
	B = createPoint(width, 0);
	C = createPoint(width, height);
	D = createPoint(0, height);
	E = createPoint(width/2, height);
	F = createPoint(width*0.4, height*0.65);
	G = createPoint(width, height/2);
}

function pathPoligon1(ctx, color) {
	ctx.beginPath();
	ctx.strokeStyle = color;
	ctx.moveTo(A.x + mRadius, A.y);
	ctx.lineTo(B.x - mRadius, B.y);
	ctx.quadraticCurveTo(B.x, B.y, B.x, B.y + mRadius);
	ctx.lineTo(G.x, G.y);
	ctx.lineTo(F.x, F.y);
	ctx.lineTo(E.x, E.y);
	ctx.lineTo(D.x + mRadius, D.y);
	ctx.quadraticCurveTo(D.x, D.y, D.x, D.y - mRadius);
	ctx.lineTo(A.x, A.y + mRadius);
	ctx.quadraticCurveTo(A.x, A.y, A.x + mRadius, A.y);
	ctx.fillStyle=color;
	ctx.fill();
	ctx.stroke();
}

function pathPoligon2(ctx, color) {
	ctx.beginPath();
	ctx.strokeStyle = color;
	ctx.moveTo(G.x, G.y);
	ctx.lineTo(F.x, F.y);
	ctx.lineTo(E.x, E.y);
	ctx.stroke();
}

function pathPoligon3(ctx, color) {
	ctx.beginPath();
	ctx.strokeStyle = color;
	ctx.moveTo(G.x, G.y);
	ctx.lineTo(E.x, E.y);
	ctx.lineTo(C.x - mRadius, C.y);
	ctx.quadraticCurveTo(C.x, C.y, C.x, C.y - mRadius);
	ctx.lineTo(G.x, G.y);
	ctx.fillStyle=color;
	ctx.fill();
	ctx.stroke();
}

$('.menuIcon #mainMenuIcon').click(function(){
});

$('.menuIcon #pageMenuIcon').click(function(){
	var offset = $(this).offset();
	var height = $(this).height();
	var width = $(this).width();
	//var top = offset.top + height + 25;
	var top = height;
	var right = $(document).width() - offset.left - width;
	showPagePopupMenu(top, right);
});

function showPagePopupMenu(top, right) {
	var pageBreaks = $('.formView .fvControl.inputPageBreak');
	$('.popup-page-menu').prop('style', 'top: '+ top + 'px !important');
	$('.popup-page-menu').jqmShow();
	$('.jqmOverlay').off().click(function(){
		$('.popup-page-menu').jqmHide();
		$('.jqmOverlay').off();
	});
	
	//$('.popup-page-menu').css('top', top);
	$('.popup-page-menu').css('right', right);
	$('.popup-page-menu').css('left', 'inherit');
	$('.jqmOverlay:visible').css('opacity', 0);
	var scroll_contain = $('.popup-page-menu .scroll_contain').empty();
	for(var i=0; i<pageBreaks.length; i++){
		pageItem = $(pageBreaks[i]);
		if(pageItem.hasClass(CONST_CLASS_HIDE_CONTROL)
				|| pageItem.hasClass(CONST_HIDEONMOBILEAPP)
				|| pageItem.hasClass(CONST_CSS_CLASS_HIDE_SESSION)){
			continue;
		}
		var item = $('<div class="menu-item '+ pageItem.attr('id') +'"></div>');
		var name = pageItem.find('.pageBreakInfo .controlLabel').text();
		item.empty().append(name);
		item.attr('data', pageItem.attr('id'));
		scroll_contain.append(item);
		item.click(function(){
			$('.popup-page-menu').jqmHide();
			var pageId = $(this).attr('data');
			var pageCtrl = $('#' + pageId);
			hideShowDetailBtnClick(pageCtrl);
			
			// Refresh layout of media buttons in shading mode (PCA-180) inside PageBreak
			reArrangeLayoutOfChooseOneWithShadingWALastAction();
		});
	}
}

var toRad = function(p_angle) {
  return (p_angle - 90) * Math.PI / 180;
};

var drawArc = function(ctx, p_x, p_y, p_radius, p_startAngle, p_endAngle) {
  var anglePerSegment, index, segments, totalAngle, x, y, _j;

  totalAngle = p_endAngle - p_startAngle;
  segments = Math.ceil(Math.abs(Math.sqrt(1 - Math.pow(1 - Math.min(p_radius / 60, 1), 2)) * totalAngle * p_radius * 0.01));
  anglePerSegment = totalAngle / segments;
  for (index = _j = 1; 1 <= segments ? _j <= segments : _j >= segments; index = 1 <= segments ? ++_j : --_j) {
    x = p_x + Math.cos(toRad(p_startAngle + (anglePerSegment * index))) * p_radius;
    y = p_y + Math.sin(toRad(p_startAngle + (anglePerSegment * index))) * p_radius;
    ctx.lineTo(x, y);
  }
};

var drawRoundRect = function(ctx, rect, radiusx,  radiusy, color) {
  ctx.beginPath();
  ctx.lineWidth = 1;
  ctx.strokeStyle = color;
  var p_x = rect.x;
  var p_y = rect.y;
  var p_wdith = rect.width;
  var p_height = rect.height;
  var p_radius = radiusx;
  var bottom, bottomArcY, left, leftArcX, right, rightArcX, top, topArcY;

  if (p_wdith < p_radius / 2) {
    p_radius = p_width / 2;
  }
  if (p_height < p_radius / 2) {
    p_radius = p_height / 2;
  }
  top = p_y;
  bottom = top + p_height;
  left = p_x;
  right = left + p_wdith;
  rightArcX = right - p_radius;
  leftArcX = left + p_radius;
  topArcY = top + p_radius;
  bottomArcY = bottom - p_radius;
  ctx.moveTo(leftArcX, top + 0.5);
  ctx.lineTo(rightArcX, top + 0.5);
  drawArc(ctx, rightArcX - 0.5, topArcY, p_radius, 0, 90);
  ctx.lineTo(right - 0.5, bottomArcY);
  drawArc(ctx, rightArcX, bottomArcY - 0.5, p_radius, 90, 180);
  ctx.moveTo(rightArcX, bottom - 0.5);
  ctx.lineTo(leftArcX, bottom - 0.5);
  drawArc(ctx, leftArcX + 0.5, bottomArcY, p_radius, 180, 270);
  ctx.lineTo(left + 0.5, topArcY);
  drawArc(ctx, leftArcX, topArcY + 0.5, p_radius, 270, 360);
  ctx.fillStyle=color;
  ctx.fill();
  ctx.stroke();
};

function isFullScreen(){
	var isFS = false;
	if(window == undefined || window.location == undefined || window.location.search == undefined) {
		return false;
	}
	if(window.location.search.indexOf('?SID=FULLSCREEN') == 0){
		isFS = true;
	} else {
		try {
			if(window.parent.location.search.indexOf('?isSubmit=1&') == 0){
				isFS = true;
			}
		} catch (e){}
	}
	return isFS;
}
/*function drawFVFullScreenIcon(canvas, color){
	if(!canvas){
		return;
	}
	var minimize = false;
	if(window == undefined || window.location == undefined || window.location.search == undefined) {
		return;
	}
	if(window.location.search.indexOf('?SID=FULLSCREEN') == 0){
		minimize = true;
	} else {
		try {
			if(window.parent.location.search.indexOf('?isSubmit=1&id=') == 0){
				minimize = true;
			}
		} catch (e){}
	}
	var ctx = canvas.getContext("2d");
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	
	var rec1, rec2;
	if(!minimize){
		rec1 = {
			x:0,
			y:23,
			width:12,
			height:16
		};
		rec2 = {
			x:18,
			y:0,
			width:21,
			height:24
		};
	}else{
		rec1 = {
			x:0,
			y:15,
			width:21,
			height:24
		};
		rec2 = {
			x:27,
			y:0,
			width:12,
			height:16
		};
	}

	init(canvas.width, canvas.height);
	drawRoundRect(ctx, rec1, 0, 0, color);
	drawRoundRect(ctx, rec2, 0, 0, color);
}*/