/**
 * A class to represent and set up a thumbnail on the page.
 * A thumbnail should start off as an image (with dimensions) and a hyperlink:
 * <a href="/" class="thumbnail"><img src="/images/thumbnail.png" alt="Thumbnail" width="112" height="84" /></a>
 * The constructor is responsible for manipulating the DOM.
 * @param {jQuery|Element} element The anchor element as described above. 
 * @constructor
 * @return Nothing returned.
 */
var Thumbnail = function(element) {
	var that = this;
	this.element = $(element);
	this.image = $("img", element).eq(0);
	
	// Add the border element to the thumbnail
	this.border = $("<span></span>")
		.addClass("thumbnail_border")
		.css("opacity", 0.4);
	this.drawBorder();
	// Insert the border to the thumbnail
	this.element.prepend(this.border);
	
	// Now set up events
	this.element.mouseenter(function(event) {
		that.showBorder();
		return false;
	});
	this.element.mouseleave(function(event) {
		that.hideBorder();
		return false;
	});
	
	// Update the image's border on load
	this.image.load(function(event) {
		that.drawBorder();
	});
}

/**
 * Redraws the border based on the size of the image
 */
Thumbnail.prototype.drawBorder = function() {
	// if clause to fix bug in chrome
	if (this.image.width() > 0 && this.image.height() > 0) {
		this.border.width(this.image.width() - 6)
			.height(this.image.height() - 6)
			// Place the position as Chrome wasn't doing this automatically
			.css("top", this.image.position().top)
			.css("left", this.image.position().left);
	}
}

/**
 * Shows the border around the thumbnail
 */
Thumbnail.prototype.showBorder = function() {
	this.border.fadeTo("fast", 0.8);
}

/**
 * Hides the border around the thumbnail
 */
Thumbnail.prototype.hideBorder = function() {
	this.border.fadeTo("fast", 0.4);
}

/**
 * A class to represent and set up an image banner on the page.
 * @param {jQuery|Element} element The wrapper div element. 
 * @constructor
 * @return Nothing returned.
 */
var Banner = function(element) {
	var that = this;
	this.element = $(element);
	
	// Set up element references
	this.infoElement = $(".banner_info", element)
		.hide();
	
	this.flickrLink = $("a", this.infoElement);
	
	this.borderElement = $("<a></a>")
		.attr("title", this.flickrLink.attr("title"))
		.addClass("banner_border")
		.attr("href", this.flickrLink.attr("href"))
		.css("opacity", 0.4);
	
	this.infoBackgroundElement = $("<span></span>")
		.addClass("banner_info_background")
		.css("opacity", 0.4);
	
	// Add the border
	this.element.prepend(this.borderElement);
	
	// Set up the info box
	this.infoElement.wrapInner($("<span></span>").addClass("banner_info_content"));
	
	// Add the info background
	this.infoElement.append(this.infoBackgroundElement);
	
	// Change the wording of the flickr link
	this.flickrLink.html("<img src=\"/images/flickr_logo.png\" class=\"flickr_logo\" alt=\"Flickr logo\" width=\"15\" height=\"16\" />Click to view on Flickr");
	
	// Set up event listeners
	this.element.mouseenter(function(event) {
		that.showBorder();
		return false;
	});
	this.element.mouseleave(function(event) {
		that.hideBorder();
		return false;
	});
	this.element.click(function(event) {
		window.location = that.flickrLink.attr("href");
	});
}

/**
 * Shows the border around the banner
 */
Banner.prototype.showBorder = function() {
	this.borderElement.fadeTo("fast", 0.8);
	this.infoElement.slideDown("fast");
	this.infoBackgroundElement.fadeTo("fast", 0.8);
}

/**
 * Hides the border around the banner
 */
Banner.prototype.hideBorder = function() {
	this.borderElement.fadeTo("fast", 0.4);
	this.infoElement.slideUp("fast");
	this.infoBackgroundElement.fadeTo("fast", 0.4);
}

/**
 * A class to represent and set up a special link.
 * @param {jQuery|Element} link The hyperlink element to represent. 
 * @constructor
 * @return Nothing returned.
 */
var SpecialLink = function(link) {
	var that = this;
	this.link = $(link);
	
	this.link.removeClass("link_special").addClass("link_special_js");
	
	// Set up event listeners
	this.link.mouseenter(function(event) {
		that.highlightLink();
	});
	this.link.mouseleave(function(event) {
		that.deHighlightLink();
	});
}

/**
 * Highlights the link on mouseover
 */
SpecialLink.prototype.highlightLink = function() {
	this.link.animate({
		borderBottomColor: "#ffffff"
	}, "fast");
	$("span", this.link).animate({
		color: "#ffffff"
	}, "fast");
}

/**
 * Dehighlights the link on mouseout
 */
SpecialLink.prototype.deHighlightLink = function() {
	this.link.animate({
		borderBottomColor: "#7eb0cc"
	}, "fast");
	$("span", this.link).animate({
		color: "#7eb0cc"
	}, "fast");
}

/**
 * Loads up the page on load.
 */
$(document).ready(function() {
	$(".thumbnail").each(function(i, eachThumbnail) {
		new Thumbnail(eachThumbnail);
	});
	$("#banner").each(function(i, eachBanner) {
		new Banner(eachBanner);
	});
	$("a.link_special").each(function(i, eachLink) {
		new SpecialLink(eachLink);
	});
});