/**
 * SEO check dialog widget to show SEO issues from different SEO test and ratings for multiple languages.
 * 
 * The `.seoUiSeoCheckWidget()` method adds content handling for a given ep.ui.dialog instance.
 * 
 * The widget relies on an existing dialog instance and handles the content of the dialog which is supplied from
 * the server via an ajax request. It also changes the dialog title bar and cares for the storage of the calculated
 * SEO quality factor via another ajax request to the server.
 * 
 * ### Examples
 * Apply .seoUiSeoCheckWidget() to a ep.ui.dialog instance.
 * 
 * JavaScript:
 * 
 *     var dialog;
 *     if(!dialog) {
 *       dialog = de_epages('<div>')
 *         .uiDialog({
 *           autoOpen: false,
 *           title: '<span class="ep-SEOGaugeWidgetTitle">SEOCheckDialogTitle</span>',
 *           buttons: { "Close": {
 *             text: 'SEOCheckDialogCloseButton',
 *             click: function() { ep(this).uiDialog("close");}
 *           }}
 *         });
 *     
 *         dialog.on("SEOCheckNewQuality", function(event, newValue) {
 *           de_epages('#SEOGaugeWidget').seoUiSeoGaugeWidget('Instance').setPercentage(newValue);
 *         });
 *     }
 *     dialog.seoUiSeoCheckWidget({ 'currentSEOQuality' : 15 });
 *     ep(dialog).find('.ep-metaparse').metaparse();
 *     ep(dialog).uiDialog('Instance').uiDialog.find('.ep-metaparse').metaparse();
 *     ep(dialog).uiDialog('open');
 * 
 * 
 * @class jQuery.ui.seoUiSeoCheckWidget
 * 
 * @uses de_epages
 * @uses ep.ajax
 * @uses jQuery.ui.tabs
 * @uses ep.ui.dialog
 * @uses de_epages.seo.ui.seoGaugeWidge
 * @since 6.12.0
 */

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

/**
 * @cfg {Integer} objectId Object ID used for the ajax requests.
 */

/**
 * @cfg {Integer} languageId Language ID used for the ajax requests.
 */

/**
 * See `jQuery.ui.seoUiSeoCheckWidget` for details.
 * 
 * @param {Object} [options] A map of additional options pass to the method.
 * @param {Integer} currentSEOQuality SEO quality factor.
 * @param {Integer} objectId Object ID used for the ajax requests.
 * @param {Integer} languageId Language ID used for the ajax requests.
 * 
 * @method seoUiSeoCheckWidget
 * @member jQuery
 * 
 * @since 6.12.0
 */

/*
 * @copyright		Copyright 2006-2011, epages GmbH, All Rights Reserved.
 *
 * @module			de_epages.seo.ui.seoCheckWidget
 */

define( "de_epages/seo/ui/seocheckwidget", [
	"jquery",
	"ep",
	"de_epages",

	"jquery/ui/tabs",
	"jquery/metaparse",
	"ep/ui/dialog",
	"ep/ajax",
	"de_epages/seo/ui/seogaugewidget"
], function( $, ep, de_epages ){

	$.widget( "ui.seoUiSeoCheckWidget", {

		_gaugeWidget : undefined,

		options : {
			caption : 'SEOCheck',
			currentSEOQuality : 0,
			objectId : ep.config.objectId,
			languageId : ep.config.languageId
		},

		_create : function() {
			this.elem = this.element;
			this.elem.uiDialog('option', 'width', 920);
			this.elem.uiDialog('option', 'height', 550);
			this.elem.uiDialog('option', 'modal', true);
		},

		_init : function() {
			this.element.html('');
			this._getDialogContent();
			this._buildTitleGauge();
		},

		_getDialogContent : function() {
			ep.ajax({
				data: {
					'ViewAction': 'MBO-ViewSEOCheck',
					'ObjectID': this.options.objectId,
					'LanguageID': this.options.languageId
				},
				context: this
			})
			.done(function(data, textStatus, XMLHttpRequest) {
				data = this._sortTestsBySeverity(data);
				this.element.empty().append(data).find('.ep-js').metaparse();
				var newQual = this.elem.children('.seoCheck').data('newseoquality');
				if(newQual && newQual != this.options.currentSEOQuality) {
					this.elem.trigger("SEOCheckNewQuality", newQual);
					this._refreshTitleGauge(newQual);
				}
			});
		},

		_sortTestsBySeverity : function(data) {
			var cache = jQuery(data);
			cache.find('ul.seoTest').each(function() {
				var ul = $(this);
				ul.children('.yellow').prependTo(ul);
				ul.children('.orange').prependTo(ul);
				ul.children('.red').prependTo(ul);
			});
			return cache;
		},

		_buildTitleGauge : function() {
			this._gaugeWidget = de_epages('<div>').seoUiSeoGaugeWidget({
				'caption' : this.options.caption,
				'showStatusImage' : false,
				'seoQuality' : this.options.currentSEOQuality
			})
			.seoUiSeoGaugeWidget('Instance');
			this.elem.uiDialog('option','title', this._gaugeWidget.element );
		},

		_refreshTitleGauge : function(newValue) {
			if(this._gaugeWidget) {
				this._gaugeWidget.setPercentage(newValue);
			}
		}

	});

	return de_epages;

});