csjsPackage('csjs.ui.control.blogger');

csjsImportExternal('jQuery');
csjsImport('csjs');
csjsImport('csjs.i18n');
csjsImport('csjs.ui.control');

/**
 * ListLanguageSwitch
 */
csjs.ui.control.blogger.ListLanguageSwitch = function(strControlId) {
	var su = csjs.ui.control.blogger.ListLanguageSwitch.prototype.__super;
	su.constructor.call(this, strControlId);
	jQuery(this._elem).bind(csjs.i18n.I18N.eventLanguageChanged, csjsDelegate(this, this.onLanguageChanged));
};

csjs.ui.control.blogger.ListLanguageSwitch.strControlTypeAttrValue = 'csjs.ui.control.blogger.ListLanguageSwitch';

csjsExtends(csjs.ui.control.blogger.ListLanguageSwitch, csjs.ui.control.AbstractControl);
csjs.ui.control.blogger.ListLanguageSwitch.prototype._i18n = csjs.i18n.I18N.getInstance();

csjs.ui.control.blogger.ListLanguageSwitch.prototype.onLanguageChanged = function() {
	this._selectLanguage(this._elem, this._i18n.getCurrLang());
};

csjs.ui.control.blogger.ListLanguageSwitch.prototype._selectLanguage = function(elemSelector, strLang) {
	var textColor = jQuery(elemSelector).css('color');
	var backgroundColor = jQuery(elemSelector).css('background-color');
	jQuery(elemSelector.childNodes).filter('div').filter(function(index, elem) {
		if (elem.innerHTML == strLang)
			jQuery(elem).css('border', '1px solid ' + textColor);
		else
			jQuery(elem).css('border', '1px solid ' + backgroundColor);
	});
};

csjs.ui.control.blogger.ListLanguageSwitch.prototype._createControl = function(i18n) {
	jQuery(this._elem).css('text-align', 'center');
	var arrLangs = i18n.getLangs();
	for ( var i in arrLangs) {
		var strLang = arrLangs[i];
		var elem = document.createElement('div');
		elem.innerHTML = strLang;
		jQuery(elem).bind('click', {
			strLang : strLang
		}, function(event) {
			i18n.trigger(event.data.strLang);
		}).css('cursor', 'pointer').css('display', 'inline').css('padding', '2px');
		this._elem.appendChild(elem);
	}
};

csjs.ui.control.blogger.ListLanguageSwitch.prototype._initGui = function() {
	this._createControl(this._i18n);
	this._selectLanguage(this._elem, this._i18n.getCurrLang());
};

/**
 * TranslatorGadget
 */
csjs.ui.control.blogger.TranslatorGadget = function(strControlId) {
	var su = csjs.ui.control.blogger.TranslatorGadget.prototype.__super;
	su.constructor.call(this, strControlId);
};

csjsExtends(csjs.ui.control.blogger.TranslatorGadget, csjs.ui.control.AbstractControl);
csjs.ui.control.blogger.TranslatorGadget.prototype._qTranslator = null;

csjs.ui.control.blogger.TranslatorGadget.prototype._initGui = function() {
	this._qElem.text('Translator').bind('click', csjsDelegate(this, this._toggleTranslator));
	this._qTranslator = jQuery('<div />').attr(csjs.ui.control.ControlsFactory.strCtrlClassAttrName, 'csjs.ui.control.blogger.Translator').appendTo('body');
	csjs.ui.control.ControlsFactory.getInstance().createControl(this._qTranslator[0]);
};

csjs.ui.control.blogger.TranslatorGadget.prototype._toggleTranslator = function() {
	this._qTranslator.toggle();
};

/**
 * Translator
 *
 * @param width
 *          like 800 or '800px' or '50%', optional, default - 300
 * @param height
 *          like 800 or '800px' or '50%' , optional, default - 200
 * @param stripBorder
 *          like true or false, optional, default - false
 */
csjs.ui.control.blogger.Translator = function(strControlId, objParams) {
	var su = csjs.ui.control.blogger.Translator.prototype.__super;
	su.constructor.call(this, strControlId, objParams);
};

csjsExtends(csjs.ui.control.blogger.Translator, csjs.ui.control.AbstractControl);
csjs.ui.control.blogger.Translator.prototype._qTabs = null;
csjs.ui.control.blogger.Translator.prototype._qSource = null;
csjs.ui.control.blogger.Translator.prototype._qI18nTable = null;
csjs.ui.control.blogger.Translator.prototype._qResult = null;
csjs.ui.control.blogger.Translator.prototype._isDynamicWidth = true;
csjs.ui.control.blogger.Translator.prototype._isDynamicHeight = false;
csjs.ui.control.blogger.Translator.prototype._defaultWidth = 300;
csjs.ui.control.blogger.Translator.prototype._defaultHeight = 200;
csjs.ui.control.blogger.Translator.prototype._currTabIdx = 0;

csjs.ui.control.blogger.Translator.prototype._initGui = function() {
	this._qTabs = jQuery('<div>').attr('style', 'padding: 0px; margin: 0px').appendTo(this._qElem);
	if (this._params && this._params.stripBorder)
		this._qTabs.css('border-width', '0px');
	var qUl = jQuery('<ul>').appendTo(this._qTabs);
	var qLi0 = jQuery('<li>').appendTo(qUl);
	var qA0 = jQuery('<a>').attr('href', '#' + this.getId() + '_tab1').text('Original HTML').appendTo(qLi0);
	var qLi1 = jQuery('<li>').appendTo(qUl);
	var qA1 = jQuery('<a>').attr('href', '#' + this.getId() + '_tab2').text('I18N').appendTo(qLi1);
	var qLi2 = jQuery('<li>').appendTo(qUl);
	var qA2 = jQuery('<a>').attr('href', '#' + this.getId() + '_tab3').text('I18N injected HTML').appendTo(qLi2);

	this._qSource = jQuery('<textarea>').attr('id', this.getId() + '_tab1').addClass('csjs-ui-control_container').attr('style', 'resize: none;').attr('wrap', 'off').appendTo(this._qTabs);
	this._qI18nTable = jQuery('<div>').attr('id', this.getId() + '_tab2').attr('style', 'margin: 0px; padding: 0px; overflow: auto;').appendTo(this._qTabs);
	this._qResult = jQuery('<textarea>').attr('id', this.getId() + '_tab3').attr('style', 'margin: 0px; padding: 0px; overflow: auto; resize: none;').attr('wrap', 'off').appendTo(this._qTabs);

	this._qTabs.tabs();

	this._setDimension();

	qA0.click(csjsCallback(this, this._onTabSelected, 0));
	qA1.click(csjsCallback(this, this._onTabSelected, 1));
	qA2.click(csjsCallback(this, this._onTabSelected, 2));
	jQuery(window).resize(csjsDelegate(this, this._onWindowResize));
};

csjs.ui.control.blogger.Translator.prototype._setDimension = function() {
	var width = this._defaultWidth;
	if (this._params && this._params.width) {
		width = this._params.width;
		if (typeof this._params.width != 'number' && this._params.width.indexOf('%') < 0) {
			this._isDynamicWidth = false;
		}
	}

	var height = this._defaultHeight;
	if (this._params && this._params.height) {
		if (typeof this._params.height === 'string' && this._params.height.indexOf('%') >= 0) {
			this._isDynamicHeight = true;
			height = parseInt(this._params.height) * 0.01 * jQuery(window).height();
		} else
			height = parseInt(this._params.height);
	}
	height = height - this._qElem.children().eq(0).children().eq(0).outerHeight();

	this._qElem.css('width', width); // work for both % and px
	width = this._qTabs.innerWidth();
	this._qSource.css('width', width).css('height', height);
	this._qI18nTable.css('width', width).css('height', height);
	this._qResult.css('width', width).css('height', height);
};

csjs.ui.control.blogger.Translator.prototype._onTabSelected = function(numSelectedTab) {
	//	alert('Selected ' + numSelectedTab + ' tab!');
};

csjs.ui.control.blogger.Translator.prototype._onWindowResize = function() {
	if (this._isDynamicWidth) {
		var width = this._qTabs.innerWidth();

		this._qSource.css('width', width);
		this._qI18nTable.css('width', width);
		this._qResult.css('width', width);
	}
	if (this._isDynamicHeight) {
		var height = parseInt(this._params.height) * 0.01 * jQuery(window).height() - this._qElem.children().eq(0).children().eq(0).outerHeight();

		this._qSource.css('height', height);
		this._qI18nTable.css('height', height);
		this._qResult.css('height', height);
	}
};