TW.IDE.Widgets.shape = function () {

    var domElementId;
    
    this.widgetProperties = function () {
        return {
            'name': TW.IDE.I18NController.translate('tw.shape-ide.widget.name'),
            'description': TW.IDE.I18NController.translate('tw.shape-ide.widget.description'),
            'category': ['Common'],
            'supportsLabel': false,
            'supportsAutoResize': true,
			'supportsTooltip': true,
            'defaultBindingTargetProperty': 'Data',
            'properties': {
				'ToolTipField': {
                    'description': TW.IDE.I18NController.translate('tw.button-ide.properties.label.description'),
                    'defaultValue': TW.IDE.I18NController.translate('tw.button-ide.properties.label.default-value'),
                    'baseType': 'STRING',
					 "isBindingTarget": true,
                    'isLocalizable': true
                },
                'CustomClass': {
                    'description': TW.IDE.I18NController.translate('tw.shape-ide.properties.custom-class.description'),
                    'baseType': 'STRING',
                    'isLocalizable': false,
                    'isBindingSource': true,
                    'isBindingTarget': true,
                    'isVisible': false
                },
                'Data': {
                    'description': TW.IDE.I18NController.translate('tw.shape-ide.properties.data.description'),
                    'isBindingTarget': true,
                    'isVisible': true,
                    'baseType': 'ANYSCALAR',
                    'warnIfNotBoundAsTarget': false
                },
                'ShapeType': {
                    'description': TW.IDE.I18NController.translate('tw.shape-ide.properties.shape-type.description'),
                    'baseType': 'STRING',
                    'defaultValue': 'rectangle',
                    'selectOptions': [
                        { value: 'rectangle', text: TW.IDE.I18NController.translate('tw.shape-ide.properties.shape-type.select-options.rectangle') },
                        { value: 'roundrect', text: TW.IDE.I18NController.translate('tw.shape-ide.properties.shape-type.select-options.round-rect') },
                        { value: 'circle', text: TW.IDE.I18NController.translate('tw.shape-ide.properties.shape-type.select-options.circle') },
                        { value: 'ellipse', text: TW.IDE.I18NController.translate('tw.shape-ide.properties.shape-type.select-options.ellipse')}
                    ]
                },
                'Width': {
                    'defaultValue': 50,
                    'description': TW.IDE.I18NController.translate('tw.shape-ide.properties.width.description')
                },
                'Height': {
                    'defaultValue': 50,
                    'description': TW.IDE.I18NController.translate('tw.shape-ide.properties.height.description')
                },
                'RectangleCornerRadius': {
                    'description': TW.IDE.I18NController.translate('tw.shape-ide.properties.rectangle-corner-radius.description'),
                    'baseType': 'NUMBER',
                    'defaultValue': 10
                },
                'ShapeStyle':{
                    'description': TW.IDE.I18NController.translate('tw.shape-ide.properties.shape-style.description'),
                	'baseType': 'STYLEDEFINITION',
                    'defaultValue': 'DefaultChartStyle'
                },
                'ShapeFormatter': {
                    'description': TW.IDE.I18NController.translate('tw.shape-ide.properties.shape-formatter.description'),
                    'baseType': 'STATEFORMATTING',
                    'baseTypeInfotableProperty': 'Data'
                },
                'GradientType': {
                    'description': TW.IDE.I18NController.translate('tw.shape-ide.properties.gradient-type.description'),
                    'baseType': 'STRING',
                    'defaultValue': 'linear',
                    'selectOptions': [
                        { value: 'linear', text: TW.IDE.I18NController.translate('tw.shape-ide.properties.gradient-type.select-options.linear') },
                        { value: 'radial', text: TW.IDE.I18NController.translate('tw.shape-ide.properties.gradient-type.select-options.radial') }
                    ]
                },
                'GradientOrientation': {
                    'description': TW.IDE.I18NController.translate('tw.shape-ide.properties.gradient-orientation.description'),
                    'baseType': 'STRING',
                    'defaultValue': 'vertical',
                    'selectOptions': [
                        { value: 'vertical', text: TW.IDE.I18NController.translate('tw.shape-ide.properties.gradient-orientation.select-options.vertical') },
                        { value: 'horizontal', text: TW.IDE.I18NController.translate('tw.shape-ide.properties.gradient-orientation.select-options.horizontal') }
                    ]
                },
                'EnableDynamicFill': {
                	'baseType': 'BOOLEAN',
                	'defaultValue': false,
                  'description': TW.IDE.I18NController.translate('tw.shape-ide.properties.enable-dynamic-fill.description')
                },
                'DynamicRangeMinimum': {
                    'description': TW.IDE.I18NController.translate('tw.shape-ide.properties.dynamic-range-minimum.description'),
                    'isBindingTarget': true,
                    'isVisible': true,
                    'baseType': 'NUMBER',
                    'defaultValue' : 0,
                    'warnIfNotBoundAsTarget': false
                },
                'DynamicRangeMaximum': {
                    'description': TW.IDE.I18NController.translate('tw.shape-ide.properties.dynamic-range-maximum.description'),
                    'isBindingTarget': true,
                    'isVisible': true,
                    'baseType': 'NUMBER',
                    'defaultValue' : 100,
                    'warnIfNotBoundAsTarget': false
                },
                'DynamicFillOrientation': {
                    'description': TW.IDE.I18NController.translate('tw.shape-ide.properties.dynamic-fill-orientation.description'),
                    'baseType': 'STRING',
                    'defaultValue': 'vertical',
                    'selectOptions': [
                        { value: 'vertical', text: TW.IDE.I18NController.translate('tw.shape-ide.properties.dynamic-fill-orientation.select-options.vertical') },
                        { value: 'horizontal', text: TW.IDE.I18NController.translate('tw.shape-ide.properties.dynamic-fill-orientation.select-options.horizontal') }
                    ]
                },
                'UnfilledBackgroundStyle':{
                    'description': TW.IDE.I18NController.translate('tw.shape-ide.properties.unfilled-background-style.description'),
                    'baseType': 'STYLEDEFINITION',
                    'defaultValue' : 'DefaultShapeUnfilledBackgroundStyle'
                }
            }
        };
    };

    this.widgetEvents = function () {
        return {
            'Clicked': {},
            'DoubleClicked': {}
        };
    };


    this.renderHtml = function () {
        var html = '<div class="widget-content widget-shape-container"></div>';
        return html;
    };

    this.setShapeStyle = function(element,fill,secondaryFill,fillType,fillOrientation,stroke,strokeWidth) {

        var shapeStyleDefinition = TW.getStyleFromStyleDefinition(this.properties['ShapeStyle']);
        
        if(shapeStyleDefinition !== undefined){
            fill = shapeStyleDefinition.backgroundColor;
            secondaryFill = shapeStyleDefinition.secondaryBackgroundColor;
            stroke = shapeStyleDefinition.lineColor;
            strokeWidth = parseInt(shapeStyleDefinition.lineThickness);
        }

    	if(fill !== undefined && fill != '') {
			if((fill === secondaryFill)  || secondaryFill === undefined  || secondaryFill === ""){
				element.attr("fill", fill);
			} else {
				var gradient;
	
				if(fillType === 'linear') {
					if(fillOrientation === 'vertical')
						gradient = '90-' + secondaryFill + '-' + fill;
					else
						gradient = '0-' + secondaryFill + '-' + fill;
				}
				else {
					if(fillOrientation === 'center')
						gradient = 'r(0.5,0.5)' + fill + '-' + secondaryFill;
					else
						gradient = 'r(0.25,0.25)' + fill + '-' + secondaryFill;
				}
	
				element.attr("fill",gradient);
			}
    	}
    	else {
    		element.attr("fill", "none");
    	}
    	
    	if(stroke !== undefined && stroke != '' && strokeWidth !== undefined && strokeWidth > 0) {
    		element.attr("stroke", stroke);
    		element.attr("stroke-width", strokeWidth);
    	}
    	else {
    		element.attr("stroke", "none");
    	}
    	
    };


    this.afterLayout = function(){
        var self = this;
        domElementId = self.jqElementId;
        
    	var width = self.jqElement.innerWidth();
    	var height = self.jqElement.innerHeight();

    	this.cleanupPaper();
    	
		var paper = Raphael(domElementId, '100%', '100%');

        self.jqElement.children('svg').css('position', 'absolute');

		this.paper = paper;
		
		var shape = undefined;
		
		var shapeType = this.properties['ShapeType'];
		if(shapeType === undefined){
			shapeType = 'rectangle';
		}

		//Get shape style properties
		var shapeStyleDefinition = TW.getStyleFromStyleDefinition(this.properties['ShapeStyle']);
		var fill = "#000";
		var secondaryFill = "#000";
		var stroke = "#fff";
		var strokeWidth = 1;
		
		if(shapeStyleDefinition !== undefined){
			fill = shapeStyleDefinition.backgroundColor;
			secondaryFill = shapeStyleDefinition.secondaryBackgroundColor;
			stroke = shapeStyleDefinition.lineColor;
			strokeWidth = parseInt(shapeStyleDefinition.lineThickness);
		}
		
		switch(shapeType){
			case 'rectangle':
				shape = paper.rect(0, 0, width, height);
				break;
			case 'roundrect':
				shape = paper.rect(0, 0, width, height,this.properties['RectangleCornerRadius']);
				break;
			case 'circle':
				var centerX = width/2;
				var centerY = height/2;
				var radius = ((centerX < centerY) ? centerX : centerY) - strokeWidth;
	
				shape = paper.circle(centerX, centerY, radius);
				break;
			case 'ellipse':
				var centerX = width/2;
				var centerY = height/2;
				var radiusX = width/2 - strokeWidth;
				var radiusY = height/2 - strokeWidth;
				
				shape = paper.ellipse(centerX, centerY, radiusX, radiusY);
				break;
		}

		this.setShapeStyle(shape, secondaryFill, fill, this.properties['GradientType'], this.properties['GradientOrientation'], stroke, strokeWidth);
    };
    
    this.afterSetProperty = function (name, value) {
        var result = false;
        switch (name) {
            case 'ShapeStyle':
            case 'Width':
            case 'Height':
            case 'ShapeType':
            case 'GradientType':
            case 'GradientOrientation':
            case 'RectangleCornerRadius':
                result = true;
                break;
            default:
                break;
        }
        return result;

    };
    
    this.validate = function () {
    	var result = [];
    	
    	if (this.properties['EnableDynamicFill'] === true && this.isPropertyBoundAsTarget('Data') === false) {
    		result.push({ severity: 'warning', message: TW.IDE.I18NController.translate('tw.shape-ide.enable-dynamic-fill-warning') });
    	}
    	
    	if ((this.properties['ShapeType'] === 'roundrect' || this.properties['ShapeType'] === 'rectangle') && this.properties['GradientType'] === 'radial') {
    		result.push({ severity: 'warning', message: TW.IDE.I18NController.translate('tw.shape-ide.radial-background-warning') });
    	}
    	
    	return result;
    };

    this.cleanupPaper = function() {
        if(this.paper !== undefined) {
            try {
            	this.paper.clear();
            	this.paper.remove();
            	this.paper = null;
            	delete this.paper;
            }
            catch (destroyErr) {
            }
        }
    };
    
    this.beforeDestroy = function () {
    	this.cleanupPaper();
    	
        domElementId = null;
    };


};