/*
 * Axelor Business Solutions
 *
 * Copyright (C) 2005-2014 Axelor (<http://axelor.com>).
 *
 * This program is free software: you can redistribute it and/or  modify
 * it under the terms of the GNU Affero General Public License, version 3,
 * as published by the Free Software Foundation.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
(function(){

var ui = angular.module('axelor.ui');

ui.ProgressMixin = {

	css: 'progress-item',
	cellCss: 'form-item progress-item',
	
	link_readonly: function(scope, element, attrs, model) {
		
		var field = scope.field || {},
			that = this;

		scope.$watch("getValue()", function(value, old) {
			var props = that.compute(field, value);
			scope.css = props.css;
			scope.width = props.width;
		});
	},
	
	compute: function(field, value) {
		
		var max = +(field.max) || 100,
			min = +(field.min) || 0;

		colors = [
			["r", 24],	// 00 - 24 (red)
			["y", 49],	// 25 - 49 (yellow)
			["b", 74],  // 50 - 74 (blue)
			["g", 100]  // 75 - 100 (green)
		];
		
		if (field.colors) {
			colors = _.chain(field.colors.split(/,/)).invoke('split', /:/).value() || [];
		}

		colors.reverse();
		
		var styles = {
			"r": "progress-danger",
			"y": "progress-warning",
			"b": "",
			"g": "progress-success"
		};

		var width = +(value) || 0;
		var css = "progress-striped";

		width = (width * 100) / (max - min);
		width = Math.min(Math.round(width), 100);

		var color = "";
		for(var i = 0 ; i < colors.length; i++) {
			var c = colors[i][0];
			var v = +colors[i][1];
			if (width <= v) {
				color = styles[c] || "";
			}
		}
		
		css += " " + color;
		if (width < 100) {
			css += " " + "active";
		}
		
		return {
			css: css,
			width: width
		};
	},
	
	template_readonly:
	'<div class="progress {{css}}">'+
	  '<div class="bar" style="width: {{width}}%;"></div>'+
	'</div>'
};

/**
 * The Progress widget with integer/decimal input.
 * 
 */
ui.formInput('Progress', 'Integer', _.extend({}, ui.ProgressMixin));

/**
 * The Progress widget with selection input.
 * 
 */
ui.formInput('SelectProgress', 'Select', _.extend({}, ui.ProgressMixin));

})(this);

@@ -1039,16 +1039,117 @@
 value);%0A
+%09%09%09scope.cssClasses = 'progress ' + props.css;%0A%09%09%09scope.styles = %7B%0A%09%09%09%09width: props.width + '%25'%0A%09%09%09%7D%0A
 %09%09%09scope
@@ -2189,31 +2189,28 @@
 div 
+ng-
 class=%22
-progress %7B%7Bcss%7D%7D
+cssClasses
 %22%3E'+
@@ -2235,33 +2235,24 @@
 ar%22 
+ng-
 style=%22
-width: %7B%7Bwidth%7D%7D%25;
+styles
 %22%3E%3C/

Fix progress bar widget (IE)