/**
 * Add SEO percentage meter which shows the SEO rating of a content object.
 * 
 * The `.seoUiSeoGaugeWidget()` method adds a visual percentage meter for the SEO quality to a DOM node.
 * 
 * You can supply the option `"seoQuality"` together with a number from 0 to 100 which sets the shown SEO quality.
 * It is possible to change this value later using the "setPercentage" function.
 * 
 * There is a small status image behind the meter which indicates whether the SEO percentage is 0 or not. You
 * can hide this image using the `"showStatusImage"` option on creation or later using the "showStatusImage"
 * function.
 * 
 * ### Examples
 * Programatically apply .seoUiSeoGaugeWidget() to a div DOM node.
 * 
 * JavaScript:
 * 
 *     de_epages('#SEOGaugeWidget')
 *         .seoUiSeoGaugeWidget({
 *             seoQuality: 25,
 *             showStatusImage : true,
 *             caption : 'SEO:'
 *         });
 * 
 * HTML:
 * 
 *     <div id="SEOGaugeWidget"></div>
 * 
 * Apply .seoUiSeoGaugeWidget() to a div DOM node via ep-metaparse.
 * 
 * HTML:
 * 
 *     <div id="SEOGaugeWidget" class="ep-metaparse de_epages.seoUiSeoGaugeWidget({'seoQuality' : 25 })"></div>
 * 
 * 
 * @class jQuery.ui.seoUiSeoGaugeWidget
 * 
 * @uses de_epages
 * @uses jQuery.ui.widget
 * @uses jQuery.tmpl
 * @since 6.12.0
 */

/**
 * @cfg {Integer} seoQuality SEO quality factor.
 */

/**
 * @cfg {Boolean} showStatusImage Show status image or not.
 */

/**
 * @cfg {String} caption Text to be displayed next to the meter bar.
 */

/**
 * See `jQuery.ui.seoUiSeoGaugeWidget` for details.
 * 
 * @param {Object} [options] A map of additional options pass to the method.
 * @param {Integer} seoQuality SEO quality factor.
 * @param {Boolean} showStatusImage Show status image or not.
 * @param {String} caption Text to be displayed next to the meter bar.
 * 
 * @method seoUiSeoGaugeWidget
 * @member jQuery
 * 
 * @since 6.12.0
 */

/*
 * @copyright		Copyright 2006-2011, epages GmbH, All Rights Reserved.
 *
 * @module			de_epages.seo.ui.seoGaugeWidget
 *
 * @revision		$Revision: 1.8 $
 */

define( "de_epages/seo/ui/seogaugewidget", [
	"jquery",
	"de_epages",
	"$tmpl!./seogaugewidget",

	"jquery/ui/widget"
], function( $, de_epages, tmplSeoGaugeWidget ){

	$.widget( "ui.seoUiSeoGaugeWidget", {

		options: {
			seoQuality: 0,				// SEO quality attribute of the object [ 0 .. 100 ]. 0 means no SEO check has been done yet.
			showStatusImage: true,
			caption : 'SEO:',
			deactivated : false
		},

		_create: function() {
			this._applyTmpl();
		},

		_applyTmpl: function() {
			var percentage = this.options.seoQuality;
      var percentageClass;

	    if(percentage < 33) {
	        percentageClass = 'red';
	    } else if(percentage < 66) {
	        percentageClass = 'orange';
	    } else if(percentage < 100) {
	        percentageClass = 'yellow';
	    } else {
	        percentageClass = 'green';
	    }

			var statusClass;
			if(this.options.deactivated) {
				statusClass = 'de_epages-seoUiSeoGaugeWidget-itemStatusDeactivated';
			} else if(percentage === 0) {
				statusClass = 'de_epages-seoUiSeoGaugeWidget-itemStatusUnknown';
			} else {
				statusClass = 'de_epages-seoUiSeoGaugeWidget-itemStatusKnown';
			}

			this.element.empty().append(
				tmplSeoGaugeWidget( [{
					statusClass : statusClass,
					caption : this.options.caption,
					percentage : percentage,
          percentageClass : percentageClass,
					statusDisplay : this.options.showStatusImage ? '' : 'HideElement'
				}])
			);
		},

		/**
		 * Shows or hides the status image.
		 * 
		 * @param {Boolean} state Show or hide the status image.
		 * 
		 * @method showStatusImage
		 * @member jQuery.ui.seoUiSeoGaugeWidget
		 * 
		 * @since 6.12.0
		 */
		showStatusImage: function(state) {
			this.options.showStatusImage = state;
			this._applyTmpl();
		},

		/**
		 * Changes the SEO quality factor.
		 * 
		 * @param {Integer} newValue SEO quality factor.
		 * 
		 * @method setPercentage
		 * @member jQuery.ui.seoUiSeoGaugeWidget
		 * 
		 * @since 6.12.0
		 */
		setPercentage: function(newValue) {
			this.options.seoQuality = newValue;
			this._applyTmpl();
		},

		setDeactivated: function(newValue) {
			this.options.deactivated = newValue;
			this._applyTmpl();
		}

	});

	return de_epages;

});