/// ===============================================================================================
/// Maker group [start]
/// ===============================================================================================

var Maker_colorSource = [];
Maker_colorSource.push('ffffff', 'ffccc9', 'ffce93',
'fffc9e','ffffc7','9aff99','96fffb','cdffff',
'cbcefb','cfcfcf','fd6864','fe996b','fffe65',
'fcff2f','67fd9a','38fff8','68fdff','9698ed',
'c0c0c0','fe0000','f8a102','ffcc67','f8ff00',
'34ff34','68cbd0','34cdf9','6665cd','9b9b9b',
'cb0000','f56b00','ffcb2f','ffc702','32cb00',
'00d2cb','3166ff','6434fc','656565','9a0000',
'ce6301','cd9934','999903','009901','329a9d',
'3531ff','6200c9','343434','680100','963400',
'986536','646809','036400','34696d','00009b',
'303498','000000','330001','643403','663234',
'343300','013300','003532','010066','340096');

var maker_Size;
var maker_color;
var maker_targetDiv;
var maker_chooseColor;

function ShowMaker(targetId){
    maker_targetDiv = targetId;

    maker_targetDiv.html('');
	
	targetId.append(
	 '<div id="panel-maker" class="rayermenu1">'
	+'	<div id="panel-maker-size">'
	+'		<span lang="txtMkgSize" class="lang" >太いさ</span>'
	+ '		<input type="radio" id="maker-size-small" name="maker-size" /><label for="maker-size-small" id="marker-small-text" class="lang" lang="txtMkgS">S</label>'
	+ '		<input type="radio" id="maker-size-medium" name="maker-size" /><label for="maker-size-medium" id="marker-medium-text" class="lang" lang="txtMkgM">M</label>'
	+ '		<input type="radio" id="maker-size-large" name="maker-size" /><label for="maker-size-large" id="marker-large-text" class="lang" lang="txtMkgB">L</label>'
	+ '		<input type="radio" id="maker-size-oversize" name="maker-size" /><label for="maker-size-oversize" id="marker-oversize-text" class="lang" lang="txtMkgSB">XL</label>'
	+'	</div>'
	+'	<span class="lang" lang="txtColor" style="float:left;margin-right: 10px;">Color</span>'
	+'	<div id="makerColorPreview"></div>'
	+'	<div id="makerColorwrapper"></div>'
	+'	<div class="canvasArea_s" style="width: 120px; height: 120px">'
	+'	<canvas id="Maker_cvPreviewmaker" class="preview" width="120px" height="120px"></canvas>'
	+'	</div>'	
	+'	<div style="clear:both; padding-top:10px">'
	+'		<a id="Maker_btnCancel" class="lang cancelbtn" style="float:right;" lang="dspCancel">Cancel</a>'
	+'		<a id="Maker_btnOk" class="lang cancelbtn" style="float:right; clear: none; margin-right:10px" lang="dspOK">OK</a>'
	+'	</div>'
	+'<div>'
	);
	var colorWrapper = $('#makerColorwrapper');
	$.each(Maker_colorSource, function (i, maker_color) {
	    colorWrapper.append('<div class="colorpicker" colorId="' + maker_color + '" style="background-color: #' + maker_color + ';"></div>');
	});

	i18nReplaceText();
    // maker_targetDiv.fadeIn('medium',function(){
    	// //lockLayout();
    	// maker_targetDiv.draggable();
    // });
	maker_targetDiv.show();
	maker_targetDiv.draggable();
    Maker_handleColorPickerEvent();
    
    $('#dlgMaker').center();
};

function touchStart_BtnOk_Maker(e){
	e.preventDefault();
		
	Maker_dspOK_click();
};

function touchStart_BtnCancel_Maker(e){
	e.preventDefault();
	
	Maker_dspCancel_click();
};

function Maker_handleColorPickerEvent(){	
	
	//$('.colorpicker').live('mouseenter',Maker_colorPickerMouseEnterFunction);
	//$('.colorpicker').live('mouseleave', Maker_colorPickerMouseLeaveFunction);
	//$('#makerColorwrapper').live('mouseleave', Maker_colorWrapperMouseLeaveFunction);
	
	if(avwUserEnvObj.os == "ipad" || avwUserEnvObj.os == "android"){
	 	$('.colorpicker').unbind('mouseenter');
    	$('.colorpicker').unbind('mouseleave');
    	$('#makerColorwrapper').unbind('mouseleave');
    	
		document.getElementById('Maker_btnOk').addEventListener('touchstart',touchStart_BtnOk_Maker,false);
	 	document.getElementById('Maker_btnCancel').addEventListener('touchstart',touchStart_BtnCancel_Maker,false);	
	}
	else{
		//alert('here');
	 	$('.colorpicker').unbind('mouseenter');
    	$('.colorpicker').unbind('mouseleave');
    	$('#makerColorwrapper').unbind('mouseleave');
    	
	 	$('.colorpicker').bind('mouseenter', Maker_colorPickerMouseEnterFunction);
    	$('.colorpicker').bind('mouseleave', Maker_colorPickerMouseLeaveFunction);
    	$('#makerColorwrapper').bind('mouseleave', Maker_colorWrapperMouseLeaveFunction);
	}
	
	
	$('#Maker_btnOk').live('click', Maker_dspOK_click);
	$('#Maker_btnCancel').live('click', Maker_dspCancel_click);

	Maker_SetDefaultValue();

	$('#maker-size-small').live('click', Maker_rdo1_click);
	$('#maker-size-medium').live('click', Maker_rdo2_click);
	$('#maker-size-large').live('click', Maker_rdo3_click);
	$('#maker-size-oversize').live('click', Maker_rdo4_click);

	$('#marker-small-text').live('click', markerSmallTextClick);
	$('#marker-medium-text').live('click', markerMediumTextClick);
	$('#marker-large-text').live('click', markerLargeTextClick);
	$('#marker-oversize-text').live('click', markerOversizeTextClick);
	
	$('.colorpicker').live('click', Maker_colorPickerClickFunction);
	$("#avw-sys-modal").click (function () {
	    maker_targetDiv.fadeOut('medium',function(){
	    	//unlockLayout();
	    });
	});
};

function markerSmallTextClick(){
	$('#maker-size-small').attr('checked','checked');
	$('#maker-size-medium').removeAttr('checked');
	$('#maker-size-large').removeAttr('checked');
	$('#maker-size-oversize').removeAttr('checked');
	Maker_rdo1_click();
};

function markerMediumTextClick(){
	$('#maker-size-small').removeAttr('checked');
	$('#maker-size-medium').attr('checked','checked');
	$('#maker-size-large').removeAttr('checked');
	$('#maker-size-oversize').removeAttr('checked');
	Maker_rdo2_click();
};

function markerLargeTextClick(){
	$('#maker-size-small').removeAttr('checked');
	$('#maker-size-medium').removeAttr('checked');
	$('#maker-size-large').attr('checked','checked');
	$('#maker-size-oversize').removeAttr('checked');
	Maker_rdo3_click();
};

function markerOversizeTextClick(){
	$('#maker-size-small').removeAttr('checked');
	$('#maker-size-medium').removeAttr('checked');
	$('#maker-size-large').removeAttr('checked');
	$('#maker-size-oversize').attr('checked','checked');
	Maker_rdo4_click();
};

// Choose type of eraser, and draw to canvas
function Maker_chooseType(typeValue, color) {
	var fillColor;
	maker_Size = typeValue;
	var canvas = document.getElementById('Maker_cvPreviewmaker');
    
	if(color == null || color == 'undefined'){
		fillColor = "f8ff00";
	}
	else{
		fillColor = '#'+ color;
	}
	
    if (canvas.getContext) {
        
        // use getContext to use the canvas for drawing
        var ctx = canvas.getContext('2d');

        // Draw shapes
        //ctx.fillStyle = "#888888";
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        ctx.fillStyle = fillColor;
        ctx.strokeStyle = fillColor;
        ctx.fillRect((eval(canvas.width)/2) - (eval(typeValue)/2), (eval(canvas.height)/2) - (eval(typeValue)/2), typeValue, typeValue);
    }
};

// Set default value for maker.
function Maker_SetDefaultValue() {
    var typeValue = undefined;
    var makerColor = ClientData.maker_color();
    typeValue = ClientData.maker_size();
    maker_Size = typeValue;
    
    if(makerColor != null || makerColor != undefined){
    	maker_chooseColor = makerColor;
    }
    else{
    	maker_chooseColor = 'f8ff00';
    	makerColor = 'f8ff00';
    }
    
    if (typeValue == 5) {
        $("#maker-size-small").attr('checked', 'checked');
        $("#maker-size-small").focus();
    }
    else if (typeValue == 12.5) {
        $("#maker-size-medium").attr('checked', 'checked');
        $("#maker-size-medium").focus();
    }
    else if (typeValue == 25) {
        $("#maker-size-large").attr('checked', 'checked');
        $("#maker-size-large").focus();
    }
    else if (typeValue == 50) {
        $("#maker-size-oversize").attr('checked', 'checked');
        $("#maker-size-oversize").focus();
    }
    else {
        maker_Size = 10;
        $("#maker-size-small").attr('checked', 'checked');
        $("#maker-size-small").focus();
    }
    
    
    $('.colorpicker[colorId="'+makerColor+'"]').css('border','1px solid black');
    $('#makerColorPreview').css('background-color', '#'+makerColor);
	$('#makerColorPreview').css('border-color', '#'+makerColor);
	Maker_chooseType(maker_Size, makerColor);
	
};

function Maker_colorPickerMouseLeaveFunction() {
	$(this).css('border','1px solid white');
	$('.colorpicker[colorId="' + maker_chooseColor + '"]').css('border', '1px solid black');
};

function Maker_colorPickerMouseEnterFunction() {
	$(this).css('border','1px solid black');
	var color = $(this).attr('colorId');
	Maker_chooseType(maker_Size, color);
	$('#makerColorPreview').css('background-color','#'+color);
	$('#makerColorPreview').css('border-color','#'+color);
};

function Maker_colorPickerClickFunction() {
    $('.colorpicker[colorId="' + maker_chooseColor + '"]').css('border', '1px solid white');
	$(this).css('border','1px solid black');
	maker_chooseColor = $(this).attr('colorId');
	
	Maker_chooseType(maker_Size, maker_chooseColor);
	$('#makerColorPreview').css('background-color','#'+maker_chooseColor);
	$('#makerColorPreview').css('border-color','#'+maker_chooseColor);
};

function Maker_rdo1_click() {
    Maker_chooseType(5, maker_chooseColor);  
};
function Maker_rdo2_click() {
    Maker_chooseType(12.5, maker_chooseColor);
};
function Maker_rdo3_click() {
    Maker_chooseType(25, maker_chooseColor);
};
function Maker_rdo4_click() {
    Maker_chooseType(50, maker_chooseColor);
};

// Event of button OK
function Maker_dspOK_click() {

    // Set selected value to local storage
    var typeValue = undefined;

    if ($("#maker-size-small").attr('checked') == 'checked') {
        typeValue = 5;
    }
    else if ($("#maker-size-medium").attr('checked') == 'checked') {
        typeValue = 12.5;
    }
    else if ($("#maker-size-large").attr('checked') == 'checked') {
        typeValue = 25;
    }
    else if ($("#maker-size-oversize").attr('checked') == 'checked') {
        typeValue = 50;
    }

	if(ClientData.maker_color() != maker_chooseColor){
	    imgMarkerTemp = canvas_marker.toDataURL("image/png;");
	
		var img = new Image();
		img.onload = function () {
		    context_draw.drawImage(img, 0, 0, canvas_draw.width, canvas_draw.height);
		};
		img.src = imgMarkerTemp;	
		
		context_marker.clearRect(0, 0, canvas_marker.width, canvas_marker.height);
		
		ClientData.maker_color();
	}
    // Set value to local
    ClientData.maker_size(typeValue);
    ClientData.maker_color(maker_chooseColor);    
    maker_Size = typeValue;
    makerColor = maker_chooseColor;
    
    // Close dialog
	/*maker_targetDiv.fadeOut('medium',function(){
		$("#avw-sys-modal").hide();
	});*/
	maker_targetDiv.hide();
	
	/*enable button */
	enableButtonMarking();
	ClientData.IsAddingMarking(true);
	isAddingMarking = ClientData.IsAddingMarking();
	makerSize = ClientData.maker_size();
	makerColor = ClientData.maker_color();
	
	/* unlock dialog overlay */
	$("#overlay").hide();
	
	$('#dlgMarking_imgMakerOption').removeClass();
	$('#dlgMarking_imgMakerOption').addClass('maker_option_hover');
};

// Event of button cancel
function Maker_dspCancel_click() {

    // Close dialog
	/*maker_targetDiv.fadeOut('medium',function(){
		$("#avw-sys-modal").hide();
	});*/
	maker_targetDiv.hide();
	/*enable button */
	enableButtonMarking();
	ClientData.IsAddingMarking(true);
	isAddingMarking = ClientData.IsAddingMarking();
	
	/* unlock dialog overlay */
	$("#overlay").hide();
	
	$('#dlgMarking_imgMakerOption').removeClass();
	$('#dlgMarking_imgMakerOption').addClass('maker_option_hover');
};

function Maker_colorWrapperMouseLeaveFunction() {
    Maker_chooseType(maker_Size, maker_chooseColor);

    $('#makerColorPreview').css('background-color', '#' + maker_chooseColor);
    $('#makerColorPreview').css('border-color', '#' + maker_chooseColor);
    $('.colorpicker[colorId="' + maker_chooseColor + '"]').css('border', '1px solid black');
	
};

/// ===============================================================================================
/// Maker group [ end ]
/// ===============================================================================================