/// ===============================================================================================
/// Pen group [start]
/// ===============================================================================================

//名前空間用のオブジェクトを用意する
var CONTENTVIEW_PEN = {};

CONTENTVIEW_PEN.ShowPen = function(targetId) {
	CONTENTVIEW_PEN.pen_targetDiv = targetId;
	I18N.i18nReplaceText();
	$('#dlgPen').show();
	$('#dlgPen').draggable({ revert: false});
	CONTENTVIEW_PEN.Pen_handleColorPickerEvent();
			
	$('#dlgPen').center();		
};

CONTENTVIEW_PEN.touchStart_BtnOk_Pen = function(e){
	e.preventDefault();
	CONTENTVIEW_PEN.pen_targetDiv.draggable("destroy");
	
	CONTENTVIEW_PEN.Pen_dspOK_click();
};

CONTENTVIEW_PEN.touchStart_BtnCancel_Pen = function(e){
	e.preventDefault();
	CONTENTVIEW_PEN.pen_targetDiv.draggable("destroy");
	
	CONTENTVIEW_PEN.Pen_dspCancel_click();
};

CONTENTVIEW_PEN.Pen_handleColorPickerEvent = function() {
 
	if(CONTENTVIEW_GENERAL.avwUserEnvObj.isIos() || CONTENTVIEW_GENERAL.avwUserEnvObj.isAndroid()){
	 	$('#dlgPen .colorpicker').unbind('mouseenter');
    	$('#dlgPen .colorpicker').unbind('mouseleave');
    	$('#penColorwrapper').unbind('mouseleave');
    	 document.getElementById('Pen_btnOk').addEventListener('touchstart',CONTENTVIEW_PEN.touchStart_BtnOk_Pen,false);
    	 document.getElementById('Pen_btnCancel').addEventListener('touchstart',CONTENTVIEW_PEN.touchStart_BtnCancel_Pen,false);
	}
	else{
		
	 	$('#dlgPen .colorpicker').unbind('mouseenter');
    	$('#dlgPen .colorpicker').unbind('mouseleave');
    	$('#penColorwrapper').unbind('mouseleave');
    	
	 	$('#dlgPen .colorpicker').bind('mouseenter', CONTENTVIEW_PEN.Pen_colorPickerMouseEnterFunction);
    	$('#dlgPen .colorpicker').bind('mouseleave', CONTENTVIEW_PEN.Pen_colorPickerMouseLeaveFunction);
    	$('#penColorwrapper').bind('mouseleave', CONTENTVIEW_PEN.Pen_colorWrapperMouseLeaveFunction);
	}
    
	//$('#Pen_btnOk').live('click', CONTENTVIEW_PEN.Pen_dspOK_click);
    $("#Pen_btnOk").on({
    	'click touchend': function(ev){
    		CONTENTVIEW_PEN.Pen_dspOK_click(ev);
    		return false;
    	},
    	'touchstart touchmove': function(){
    		//これを入れないと次にダイアログを開くと表示位置が大きくズレる
    		return false;
    	}
    });
	
	//$('#Pen_btnCancel').live('click', CONTENTVIEW_PEN.Pen_dspCancel_click);
    $("#Pen_btnCancel").on({
    	'click touchend': function(ev){
    		CONTENTVIEW_PEN.Pen_dspCancel_click(ev);
    		return false;
    	},
    	'touchstart touchmove': function(){
    		//これを入れないと次にダイアログを開くと表示位置が大きくズレる
    		return false;
    	}
    });
	

	CONTENTVIEW_PEN.Pen_SetDefaultValue();
	
	//$('#pen-small-text').live('click', CONTENTVIEW_PEN.penSmallTextClick);
    $("#pen-small-text").on({
    	'click touchend': function(ev){
    		CONTENTVIEW_PEN.penSmallTextClick(ev);
    		return false;
    	},
    	'touchstart touchmove': function(){
    		//これを入れないと次にダイアログを開くと表示位置が大きくズレる
    		return false;
    	}
    });
	
	
	//$('#pen-medium-text').live('click', CONTENTVIEW_PEN.penMediumTextClick);
    $("#pen-medium-text").on({
    	'click touchend': function(ev){
    		CONTENTVIEW_PEN.penMediumTextClick(ev);
    		return false;
    	},
    	'touchstart touchmove': function(){
    		//これを入れないと次にダイアログを開くと表示位置が大きくズレる
    		return false;
    	}
    });
	
	//$('#pen-large-text').live('click', CONTENTVIEW_PEN.penLargeTextClick);
    $("#pen-large-text").on({
    	'click touchend': function(ev){
    		CONTENTVIEW_PEN.penLargeTextClick(ev);
    		return false;
    	},
    	'touchstart touchmove': function(){
    		//これを入れないと次にダイアログを開くと表示位置が大きくズレる
    		return false;
    	}
    });
	
	//$('#pen-oversize-text').live('click', CONTENTVIEW_PEN.penOversizeTextClick);
    $("#pen-oversize-text").on({
    	'click touchend': function(ev){
    		CONTENTVIEW_PEN.penOversizeTextClick(ev);
    		return false;
    	},
    	'touchstart touchmove': function(){
    		//これを入れないと次にダイアログを開くと表示位置が大きくズレる
    		return false;
    	}
    });

	$('#dlgPen .colorpicker').die();
	$('#dlgPen .colorpicker').live('click', CONTENTVIEW_PEN.Pen_colorPickerClickFunction);
    //$("#dlgPen .colorpicker").on({
    //	'click touchend': function(ev){
    //		CONTENTVIEW_PEN.Pen_colorPickerClickFunction(ev);
    //		return false;
    //	},
    //	'touchstart touchmove': function(){
    //		//これを入れないと次にダイアログを開くと表示位置が大きくズレる
    //		return false;
    //	}
    //});
	
};

CONTENTVIEW_PEN.penSmallTextClick = function(){
	$('#pen-size-small').attr('checked','checked');
	$('#pen-size-medium').removeAttr('checked');
	$('#pen-size-large').removeAttr('checked');
	$('#pen-size-oversize').removeAttr('checked');
	CONTENTVIEW_PEN.Pen_rdo1_click();
};

CONTENTVIEW_PEN.penMediumTextClick = function(){
	$('#pen-size-small').removeAttr('checked');
	$('#pen-size-medium').attr('checked','checked');
	$('#pen-size-large').removeAttr('checked');
	$('#pen-size-oversize').removeAttr('checked');
	CONTENTVIEW_PEN.Pen_rdo2_click();
};

CONTENTVIEW_PEN.penLargeTextClick = function(){
	$('#pen-size-small').removeAttr('checked');
	$('#pen-size-medium').removeAttr('checked');
	$('#pen-size-large').attr('checked','checked');
	$('#pen-size-oversize').removeAttr('checked');
	CONTENTVIEW_PEN.Pen_rdo3_click();
};

CONTENTVIEW_PEN.penOversizeTextClick = function(){
	$('#pen-size-small').removeAttr('checked');
	$('#pen-size-medium').removeAttr('checked');
	$('#pen-size-large').removeAttr('checked');
	$('#pen-size-oversize').attr('checked','checked');
	CONTENTVIEW_PEN.Pen_rdo4_click();
};

// Choose type of eraser, and draw to canvas
CONTENTVIEW_PEN.Pen_chooseType = function(typeValue, color) {
	var fillColor;
	CONTENTVIEW_PEN.pen_Size = typeValue;
	var canvas = document.getElementById('Pen_cvPreviewPen');

	if (color == null || color == 'undefined') {
		fillColor="#fe0000";
	}
	else{
	    fillColor = '#' + color;
	}
	
    if (canvas.getContext) {
        
        // use getContext to use the canvas for drawing
        var ctx = canvas.getContext('2d');

        // Draw shapes

        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        ctx.beginPath();

        ctx.arc(canvas.width/2, canvas.height/2, typeValue, 0, 2 * Math.PI, true);
        ctx.fillStyle = fillColor;
        ctx.strokeStyle = fillColor;
        ctx.fill();
        ctx.stroke();
    }
};

// Set default value for Pen.
CONTENTVIEW_PEN.Pen_SetDefaultValue = function() {
    var typeValue = undefined;
    var penColor = ClientData.penOpt_color();
    typeValue = ClientData.penOpt_size();
    CONTENTVIEW_PEN.pen_Size = typeValue;
    
    if(penColor != null || penColor != undefined){
    	CONTENTVIEW_PEN.pen_chooseColor = penColor;
    }
    else{
    	CONTENTVIEW_PEN.pen_chooseColor = 'fe0000';
    	penColor = 'fe0000';
    }
    
    if (typeValue == 5) {
        $("#pen-size-small").attr('checked', 'checked');
        $("#pen-size-small").focus();
    }
    else if (typeValue == 12.5) {
        $("#pen-size-medium").attr('checked', 'checked');
        $("#pen-size-medium").focus();
    }
    else if (typeValue == 25) {
        $("#pen-size-large").attr('checked', 'checked');
        $("#pen-size-large").focus();
    }
    else if (typeValue == 50) {
        $("#pen-size-oversize").attr('checked', 'checked');
        $("#pen-size-oversize").focus();
    }
    else {
        typeValue = 5;
        $("#pen-size-small").attr('checked', 'checked');
        $("#pen-size-small").focus();
    }
    
    CONTENTVIEW_PEN.Pen_chooseType(typeValue, penColor);
    //START FIXCSS
    //$('#dlgPen .colorpicker[colorId="'+penColor+'"]').css('border','1px solid #e6e6e6');
    $('#dlgPen .colorpicker[colorId="'+penColor+'"]').addClass('picker-choose-on');
    $('#dlgPen .colorpicker[colorId="'+penColor+'"]').removeClass('picker-choose-off');
    //END FIXCSS
};

CONTENTVIEW_PEN.Pen_colorPickerMouseLeaveFunction = function() {

	//START FIXCSS
    //$(this).css('border','1px solid white');    
    //$('#dlgMaker .colorpicker[colorId="'+makerColor+'"]').css('border','1px solid #e6e6e6');
    $(this).addClass('picker-choose-off');
    $(this).removeClass('picker-choose-on');
    $('#dlgPen .colorpicker[colorId="' + CONTENTVIEW_PEN.pen_chooseColor + '"]').addClass('picker-choose-on');
    $('#dlgPen .colorpicker[colorId="' + CONTENTVIEW_PEN.pen_chooseColor + '"]').removeClass('picker-choose-off');
    //END FIXCSS
};

CONTENTVIEW_PEN.Pen_colorPickerMouseEnterFunction = function() {
	//START FIXCSS
    //$(this).css('border','1px solid #e6e6e6');
    $(this).removeClass('picker-choose-off');
    $(this).addClass('picker-choose-on');
    //END FIXCSS
	var color = $(this).attr('colorId');
	CONTENTVIEW_PEN.Pen_chooseType(CONTENTVIEW_PEN.pen_Size, color);
};

CONTENTVIEW_PEN.Pen_colorPickerClickFunction = function() {
	//START FIXCSS
    //$('#dlgMaker .colorpicker[colorId="' + CONTENTVIEW_MAKER.maker_chooseColor + '"]').css('border', '1px solid white');
    //$(this).css('border','1px solid #e6e6e6');
    $('#dlgPen .colorpicker[colorId="' + CONTENTVIEW_PEN.pen_chooseColor + '"]').addClass('picker-choose-off');
    $('#dlgPen .colorpicker[colorId="' + CONTENTVIEW_PEN.pen_chooseColor + '"]').removeClass('picker-choose-on');
    $(this).addClass('picker-choose-on');
    $(this).removeClass('picker-choose-off');
    //END FIXCSS
    CONTENTVIEW_PEN.pen_chooseColor = $(this).attr('colorId');
    CONTENTVIEW_PEN.Pen_chooseType(CONTENTVIEW_PEN.pen_Size, CONTENTVIEW_PEN.pen_chooseColor);
};

CONTENTVIEW_PEN.Pen_rdo1_click = function() {
	CONTENTVIEW_PEN.Pen_chooseType(5, CONTENTVIEW_PEN.pen_chooseColor);  
};
CONTENTVIEW_PEN.Pen_rdo2_click = function() {
	CONTENTVIEW_PEN.Pen_chooseType(12.5, CONTENTVIEW_PEN.pen_chooseColor);
};
CONTENTVIEW_PEN.Pen_rdo3_click = function() {
	CONTENTVIEW_PEN.Pen_chooseType(25, CONTENTVIEW_PEN.pen_chooseColor);
};
CONTENTVIEW_PEN.Pen_rdo4_click = function() {
	CONTENTVIEW_PEN.Pen_chooseType(50, CONTENTVIEW_PEN.pen_chooseColor);
};

// Event of button OK
CONTENTVIEW_PEN.Pen_dspOK_click = function() {	
    // Set selected value to local storage
    var typeValue = undefined;

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

    // Set value to local
    ClientData.penOpt_size(typeValue);
    ClientData.penOpt_color(CONTENTVIEW_PEN.pen_chooseColor);
    CONTENTVIEW_PEN.pen_Size = typeValue;
    //c = CONTENTVIEW_PEN.pen_chooseColor;    
    
    /*enable button */
	CONTENTVIEW_MARKING.enableButtonMarking();
	ClientData.IsAddingMarking(true);
	CONTENTVIEW_GENERAL.isAddingMarking = ClientData.IsAddingMarking();
	CONTENTVIEW_GENERAL.penSize = ClientData.penOpt_size();
	CONTENTVIEW_GENERAL.penColor = ClientData.penOpt_color();
    
    // Close dialog
	CONTENTVIEW_PEN.pen_targetDiv.hide();
	
	/* unlock dialog overlay */
	$("#overlay").hide();
	
	$('#dlgMarking_imgPenOption').removeClass();
	$('#dlgMarking_imgPenOption').addClass('pen_option_hover');
};

// Event of button cancel
CONTENTVIEW_PEN.Pen_dspCancel_click = function() {
  	/*enable button */
	CONTENTVIEW_MARKING.enableButtonMarking();
	ClientData.IsAddingMarking(true);
	CONTENTVIEW_GENERAL.isAddingMarking = ClientData.IsAddingMarking();
	
    // Close dialog 
	CONTENTVIEW_PEN.pen_targetDiv.hide();
    
    /* unlock dialog overlay */
	$("#overlay").hide();
	
	$('#dlgMarking_imgPenOption').removeClass();
	$('#dlgMarking_imgPenOption').addClass('pen_option_hover');
  
};

CONTENTVIEW_PEN.Pen_colorWrapperMouseLeaveFunction = function() {
	CONTENTVIEW_PEN.Pen_chooseType(CONTENTVIEW_PEN.pen_Size, CONTENTVIEW_PEN.pen_chooseColor);
    //$('#dlgPen .colorpicker[colorId="' + CONTENTVIEW_PEN.pen_chooseColor + '"]').css('border', '1px solid #e6e6e6');
	//START FIXCSS
    //$('#dlgMaker .colorpicker[colorId="' + CONTENTVIEW_MAKER.maker_chooseColor + '"]').css('border', '1px solid #e6e6e6');
    $('#dlgPen .colorpicker[colorId="' + CONTENTVIEW_PEN.pen_chooseColor + '"]').addClass('picker-choose-on');
    $('#dlgPen .colorpicker[colorId="' + CONTENTVIEW_PEN.pen_chooseColor + '"]').removeClass('picker-choose-off');
    //END FIXCSS
};

$(function () {
	//CONTENTVIEW_PEN.ready();
});

CONTENTVIEW_PEN.ready = function(){
	CONTENTVIEW_PEN.pen_Size = undefined;
	CONTENTVIEW_PEN.pen_targetDiv = undefined;
	CONTENTVIEW_PEN.pen_chooseColor = undefined;
};