/**
 * ImageLoader adds a layer of behaviour to image elements
 * @requires jQuery
 */

var Xteam = Xteam || {};
Xteam.ImageLoader = {
	/**
	 * @var DomElm
	 * Base element
	 */
	baseElm: null,

	/**
	 * Initialize
	 * @param domElm Base element
	 */
	initialize: function(baseElm) {
		var self = Xteam.ImageLoader;
		
		self.baseElm = baseElm;		
		self._swapAllImagesWithPlaceholders();
	},
	
	/**
	 * Update placeholders when a message is sent
	 * @param object
	 * @param string
	 */
	observe: function(targetObj, triggerMessage) {
		var self = Xteam.ImageLoader;
		targetObj.addObserver(triggerMessage, self, self._swapVisiblePlaceholdersWithImages);
	},
	
	/**
	 * Swap all images with placeholders
	 */
	_swapAllImagesWithPlaceholders: function() {
		var self = Xteam.ImageLoader;
		jQuery("img", self.baseElm).each(function() {
			var imgElm = this;
			self._swapImageWithPlaceholder(imgElm);
		});
	},
		
	/**
	 * Swap invisible images with placeholders
	 */
	_swapInvisibleImagesWithPlaceholders: function() {
		var self = Xteam.ImageLoader;
		jQuery("img", self.baseElm).each(function() {
			var imgElm = this;
			if (!self._isElementVisible(imgElm)) self._swapImageWithPlaceholder(imgElm);
		});
	},
	
	/**
	 * Swap an image element with a placeholder
	 * @param DomElm
	 */
	_swapImageWithPlaceholder: function(elm) {
		var imgElm = jQuery(elm);
		var placeholderElm = jQuery(document.createElement("span"));
		
		placeholderElm.attr({
			"_xteam-src": imgElm.attr("src"),
			"_xteam-alt": imgElm.attr("alt")
		}).addClass("xteam-placeholder");	
		
		imgElm.before(placeholderElm);
		imgElm.remove();
	},
		
	/**
	 * Swap visible placeholders with images
	 */
	_swapVisiblePlaceholdersWithImages: function() {
		var self = Xteam.ImageLoader;
		jQuery(".xteam-placeholder", self.baseElm).each(function() {
			var placeholderElm = this;
			if (self._isElementVisible(placeholderElm, true)) self._swapPlaceholderWithImage(placeholderElm);
		});
		
		self._safariFix();
	},
	
	/**
	 * Swap a placeholder element with it's corresponding image
	 * @param DomElm
	 */
	_swapPlaceholderWithImage: function(elm) {
		var placeholderElm = jQuery(elm);
		var imgElm = jQuery(document.createElement("img"))
			.attr({
				"src": placeholderElm.attr("_xteam-src"),
				"alt": placeholderElm.attr("_xteam-alt")
			});
		placeholderElm.before(imgElm);
		placeholderElm.remove();
	},
	
	/**
	 * Tell if an element is currently visible
	 * Adapted from Jack Slocum's post - http://extjs.com/forum/showthread.php?t=143
	 * @param DomElm
	 * @param boolean Flag to check on a single level, or to check parents as well
	 */
	_isElementVisible: function(elm, checkParents) {
		var walker = elm;
		var ref;
		var visible = true;
		while (visible && walker && walker.tagName.toLowerCase() != "body") {
			ref = jQuery(walker);
			visible = ref.css("visibility") != "hidden" && ref.css("display") != "none";
			
			if (!checkParents) break;
			else walker = walker.parentNode;
		}
		
		return visible;
	},

	/**
	 * Grr. Safari is doing something _really_ odd
	 */
	_safariFix: function() {
		if (jQuery.browser.safari) {
			var table = jQuery("table").get(0);
			table.innerHTML = table.innerHTML + "";
		}
	}
};