var Magnificent = Class.create({

	magStartItemTemplate: new Template('<li id="magnificent_#{ContentID}" style="text-align:left;border-bottom-style:solid;border-bottom-width:1px;margin:0.545em 0 0.545em 8px;padding-bottom:0.5em;text-align:left;width:100%;">'),
	magEndItemTemplate: new Template('<div class="clear"></div></li>'),
	magHeadLineTemplate: new Template('<h5 style="font-size:0.9091em;font-weight:normal;letter-spacing:1px;line-height:1.2em;text-transform:uppercase;"><a href="#{Url}" >#{Headline}</a></h5>'),
	magTitleTemplate: new Template('<h4 style="margin:0.231em 0;letter-spacing:0px;text-transform:none;font-size:1.1818em;font-weight:normal;line-height:1.154em;"><a href="#{Url}" >#{Title}</a></h4>'),
	magLeadTitleTemplate: new Template('<p>#{LeadTitle}</p>'),
	magLeadTitleWithPictureTemplate: new Template('<p><a href="#{Url}" ><img style="border-style:solid;border-width:1px;float:left;height:44px;margin:0.2em 6px 0 0;width:66px;" title="" src="http://images.derStandard.at/t/1/#{Image}" alt="#{ImageCredits}"></a>#{LeadTitle}</p>'),
	objectId: null,
	container: null,
	oParent: null,
	ulArticleContainer: null,
	initialize: function () {
		this.objectId = PageProperties.objectID;
		this.oParent = $$('.artikelLeft')[0];
		this.container = this.createContainerMarkup();
	},

	createContainerMarkup: function () {
		var oContainer = new Element('div', { 'id': 'magnificentContainer' });

		var oFeedbackContainer = new Element('div', { 'id': 'feedbackContainer' });

		var oFeedbackContainerHeadline = new Element('div', { 'style': 'border-bottom-style:solid;border-bottom-width:1px;text-align:left;font-size:1.3em;line-height:1.231em;list-style-type:none;margin:0.3em 0px 0.3em 1.2em;padding-bottom:0.3em' });
		oFeedbackContainerHeadline.innerHTML = '<p style="font-weight:bold">Feedback zum Artikel [<a style="font-weight:normal" href="/1285199957034/Magnificent">Info</a>]</p>';
		oFeedbackContainer.insert(oFeedbackContainerHeadline);

		var oFeedback = new Element('div', { 'style': 'text-align:left;font-size:1.3em;line-height:1.231em;list-style-type:none;margin:0em 0px 2em 1.2em;' });
		oFeedback.innerHTML = 'Ist dieser Artikel lesenwert? <a id="magnificentYes" >ja</a>&nbsp;|&nbsp;<a id="magnificentNo">nein</a>';
		oFeedbackContainer.insert(oFeedback);
		oContainer.insert(oFeedbackContainer);

		var oArticleContainer = new Element('div', { 'id': 'magnificentArticleContainer', 'class': 'moreContent context', 'style': 'text-align:left;' });
		var oArticleContainerHeadline = new Element('div', { 'style': 'border-bottom-style:solid;border-bottom-width:1px;text-align:left;font-size:1.3em;line-height:1.231em;list-style-type:none;margin:0.3em 0px 1em 1.2em;' });
		oArticleContainerHeadline.innerHTML = '<p>folgende Artikel könnten Sie interessieren</p>';
		oContainer.insert(oArticleContainerHeadline);
		oContainer.insert(oArticleContainer);

		var ulArticles = new Element('ul', { 'id': 'magnificentArticleList', 'style': 'list-style:none outside none;margin:0.3em 8px 1em 0.6em;' });

		oArticleContainer.insert(ulArticles);

		this.ulArticleContainer = ulArticles;

		return oContainer;
	},

	feedback: function (vote) {
		new Ajax.Request('/Live/MagnificentFeedback.ashx?id=' + this.objectId + '&recommendation=' + vote, {
			method: 'POST',
			contentType: 'application/json',
			onSuccess: function (transport) {
				if (transport.responseJSON.ReturnValue == 1) {
					document.getElementById("feedbackContainer").hide();
				} else {
					alert("Vielen Dank für Ihr Voting! Leider ist ein Fehler bei der Verarbeitung Ihrer Daten aufgetreten. Bitte versuchen Sie es später erneut!");
				}
			}
		});
	},

	writeMagnificentContent: function (data) {
		if (data != null) {
			if (data.ForContentID != null && data.ForContentID > 0) {
				var o = this;
				data.Articles.each(function (article) {
					var htmlContent =
					htmlContent = o.magStartItemTemplate.evaluate(article);
					if (article.Headline != null)
						htmlContent += o.magHeadLineTemplate.evaluate(article);
					if (article.Title != null)
						htmlContent += o.magTitleTemplate.evaluate(article);

					if (article.LeadTitle != null) {
						if (article.Image != null) {
							htmlContent += o.magLeadTitleWithPictureTemplate.evaluate(article);
						} else {
							htmlContent += o.magLeadTitleTemplate.evaluate(article);
						}
					}
					htmlContent += o.magEndItemTemplate.evaluate(article);
					o.ulArticleContainer.innerHTML += htmlContent;
				});

				this.oParent.insert(this.container);

				//check wheater to hide feedback container or not
				if (data.IsContentRated) {
					document.getElementById("feedbackContainer").hide();
				} else {
					$('magnificentYes').observe("click", function () {
						this.feedback(true);
					} .bind(this));
					$('magnificentNo').observe("click", function () {
						this.feedback(false);
					} .bind(this));

					//mouseover and mouseout effects
					$('magnificentNo').observe("mouseover", function () {
						this.style.textDecoration = 'underline';
						this.style.cursor = 'pointer';
					});
					$('magnificentNo').observe("mouseout", function () {
						this.style.textDecoration = 'none';
						this.style.cursor = 'default';
					});

					$('magnificentYes').observe("mouseover", function () {
						this.style.textDecoration = 'underline';
						this.style.cursor = 'pointer';
					});
					$('magnificentYes').observe("mouseout", function () {
						this.style.textDecoration = 'none';
						this.style.cursor = 'default';
					});
				}
				this.container.show();
			}
		}
	},

	getMagnificentDataAndWriteContent: function () {
		new Ajax.Request('/Live/Magnificent.ashx?id=' + this.objectId, {
			method: 'POST',
			contentType: 'application/json',
			onSuccess: function (transport) {
				this.writeMagnificentContent(transport.responseJSON);
			} .bind(this)
		});
	}
});

document.observe('dom:loaded', function () {
	var magnificent = new Magnificent();
	magnificent.getMagnificentDataAndWriteContent();
});