/**
 * Document   : custom.js
 * Created on : 2011.12.02., 14:44
 * Author     : Garzó László
 * Version    : 0.1
 * Description:
 *     The javascript logic for UI.
 *     
 * Requirements:
 *   - A block level element with ID = #OfferButton.
 *   - A block level element with ID = #OfferDetails.
 * 
 * References:
 *   - https://developer.mozilla.org/en/Introduction_to_Object-Oriented_JavaScript
 */

/** 
 * @class OfferDetails Offer details window
 */
function OfferDetails() {
	/**
	 * HTML template
	 */
	this.html = 
		'<div id="OfferDetails">' +
			'[%header%]\n' + 
			'[%body%]\n' +
			'[%footer%]\n' +
		'</div>';
	/**
	 * Header
	 */
	this.header = 
		'<div id="Header">' +
			'<a class="Close" href="#">[x]</a>' + 
		'</div>';
	/**
	 * Footer
	 */
	this.footer = '<div id="Footer">' +
			'<p class="RSS"><a href="http://www.ihklinika.hu/hirek.xml" ' +
			'title="Iratkozzon fel híreinkre!">' +
			'<img src="Images/rss.png"> Iratkozzon fel híreinkre!</a></p>' +
		'</div>';
	
	/**
	 * Body template
	 */
	this.body = 
		'<div id="Body">' +
			'[%header%][%content%][%footer%]' +
		'</div>';
	
	/**
	 * Body header
	 */
	this.bodyHeader = '<h1>Aktuális akciónk:</h1>';
	
	/**
	 * Body content
	 */
	this.bodyContent = '';
	
	/**
	 * Current visibility state
	 * 
	 * Available values:
	 *   - hidden
	 *   - fadeIn
	 *   - fadeOut
	 *   - visible
	 */
	this.state = "hidden";
	
	/**
	 * Stickiness (will not fade out by itself).
	 * 
	 * Available values:
	 *   - sticky
	 *   - disposable
	 */
	this.stickiness = "disposable";
}
/**
 * Outputs the content
 */
OfferDetails.prototype.getContent = function() {
	return(this.html);
}
/**
 * Composes html content from parts
 */
OfferDetails.prototype.compose = function() {
	// Compose body
	this.body = this.body.replace("[%header%]", (this.bodyHeader == undefined ?
		"" : this.bodyHeader));
	this.body = this.body.replace("[%content%]", (this.bodyContent == undefined ?
		"" : this.bodyContent));
	this.body = this.body.replace("[%footer%]", (this.bodyFooter == undefined ?
		"" : this.bodyFooter));
	 
	// Compose OfferDetails
	this.html = this.html.replace("[%header%]", (this.header == undefined ? 
		"" : this.header ));
	this.html = this.html.replace("[%body%]", (this.body == undefined ? 
		"" : this.body ));
	this.html = this.html.replace("[%footer%]", (this.footer == undefined ? 
		"" : this.footer ));
}
/**
 * Show the window
 */
OfferDetails.prototype.show = function() {
	if (this.state == "hidden") {
		$("#OfferDetails").fadeIn('slow', function () {
			od.state = "visible";
			ob.hide();
		});
		this.state = "fadeIn";
	}
}
/**
 * Hide the window
 */
OfferDetails.prototype.hide = function() {
	if (this.stickiness == "disposable") {
		if (this.state == "visible") {
			$("#OfferDetails").fadeOut('slow', function () {
				od.state = "hidden";
				ob.show();
			});
			this.state = "fadeOut";
		}
	}
}

/**
 * OfferButton 
 * The button that opens the details window
 */
function OfferButton() {
	/**
	 * HTML template
	 */
	this.html = 
		'<div id="OfferButton">' +
		'</div>';

	/**
	 * Current visibility state
	 * 
	 * Available values:
	 *   - hidden
	 *   - fadeIn
	 *   - fadeOut
	 *   - visible
	 */
	this.state = "hidden";
}
/**
 * Outputs the content
 */
OfferButton.prototype.getContent = function() {
	return(this.html);
}
/**
 * Show the window
 */
OfferButton.prototype.show = function() {
	if (this.state == "hidden") {
		$("#OfferButton").fadeIn('slow', function () {
			ob.state = "visible";
		});
		this.state = "fadeIn";
	}
}
/**
 * Hide the window
 */
OfferButton.prototype.hide = function() {
	if (this.state == "visible") {
		$("#OfferButton").fadeOut('fast', function () {
			ob.state = "hidden";
		});
		this.state = "fadeOut";
	}
}


/**
 * OfferDetails object
 * 
 * Should be global, otherwise anonymous callbacks can not reach it.
 */
var od = new OfferDetails();

/**
 * OfferButton object
 * 
 * Should be global, otherwise anonymous callbacks can not reach it.
 */
var ob = new OfferButton();

$( function() {
	if ($("table.NewsTable .Sale").length > 0 ) {
		// Compose, create, show Details
		od.bodyContent = $("table.NewsTable .Sale").first().html();
		od.compose();
		$("#TopHeader").append(ob.getContent());
		$("#TopHeader").append(od.getContent()).find("span.Initial").remove();

		// Calculate window position based on its size
		$("#OfferDetails").css("top", ($(window).height() - $("#OfferDetails").outerHeight())/2 + "px");
		$("#OfferDetails").css("left", ($("#TopHeader").innerWidth() - 500)/2 + "px");

		// Show Details only if it has not been shown today
		if ($.cookie('SalesPopupSeen') != "SeenToday") {

			// Remember not to display Details today anymore
			$.cookie('SalesPopupSeen', 'SeenToday', {expires: 1, path: "/"});
			od.show();

			// Hide Details after a while
			var t1 = setTimeout(function() {
				od.hide();
			}, 15000);
		} else {
			ob.show();
		}

		// OfferButton click displays Details
		$("#OfferButton").click(function() {
			if (od.state == "hidden") {
				od.show();
			}
		});

		// Close button forces Details to close
		$("#OfferDetails #Header .Close").click(function() {
			od.stickiness = "disposable";
			od.hide();
		})

		// Make it sticky if mouse enters.
		$("#OfferDetails").mouseenter(function() {
			od.stickiness = "sticky";
		});
	}
});