;(function($) {
	
    $.fn.buttonOverlay = function(settings) {
        var config = {
            text: 'Play Video',
            theme: 'button-overlay-red',
            type: 'button-overlay-video',
            action: null,
            state: 'collapsed',	// collapsed, open
            animated: true,	// ease into being collapsed/open, or do it instantly
            openSpeed: 300, // in milliseconds
            openEase: "easeInOutExpo",
            closeSpeed: 400,
            closeEase: "swing",
            pin: false,	// keep either collapsed or open
            template: '<div class="button-overlay"><div class="button-overlay-left"></div><div class="button-overlay-link">Play Video</div><div class="button-overlay-right"></div><div class="button-overlay-icon"></div></div>',
            position: 'bl'	// tl, tc, tr, l, c, r, bl, bc, br
        };
 
        if (settings) $.extend(config, settings);
 
        return this.each(function() {
        	if ($.fn['metadata']) {
        		$.extend(config, $(this).metadata());
        	}
        	
            var obj = $(this);
            
            if (obj.get(0).tagName != "IMG") {
            	obj = $("img:first", obj);
            }
            if (!obj.length) return;
            
            obj
            	.one("load", function() {
            		
            		Init.apply(this);
            	})
            	.each(function(){
	        		if(this.complete || (jQuery.browser.msie && parseInt(jQuery.browser.version) == 6))
	        			$(this).trigger("load");
	        	});
        });
        function Init() {
        	var obj = $(this);
            obj.css("position", "relative");
            
            var link = obj.closest("a");
            if (link.length == 0) return;
            
            var objOffset = obj.position();

            var button = $(config.template);
            var text = $(".button-overlay-link", button);
            text.text(config.text);

            button
            	.addClass(config.theme + " " + config.type)
            	.css({ left: -9999, top: -9999 })
            	.bind('click.buttonOverlay', function(e) { link.click(); return false; })
            	.insertAfter(link);
            
            var textWidth = text.outerWidth(true);
            var buttonWidth = text.position().left + textWidth + $(".button-overlay-right").outerWidth(true);
            text.data("textWidth", textWidth);
            text.data("buttonWidth", buttonWidth);
            
            if (!config.state || config.state == "collapsed") {
            	button.css("width", button.css("min-width"));
            	text.css("width", 0);
            } else {
            	button.css("width", buttonWidth);
            }
            if (!config.pin) {
            	button
	            	.bind('mouseenter.buttonOverlay', Over)
		        	.bind('mouseleave.buttonOverlay', Out)
            }
            
            var parentOffset = obj.offsetParent().offset();
            var oLeft = null;
            var oTop = null;
            button.css("position", "absolute");
            switch (config.position) {
            	case "bl":
            	default:
            		oLeft = objOffset.left + 1;
                	oTop = objOffset.top + obj.innerHeight() - button.outerHeight(true) - 1;
            }
            button
            	.hide()
            	.css({ left: oLeft, top: oTop })
            	.fadeIn("fast");

        }
        function Over() {
        	var a = $(this).children(".button-overlay-link");
        	
        	if (config.animated) {
	        	$(this).stop().animate(
	        		{
	        			width: a.data("buttonWidth")
	        		},
	        		config.openSpeed,
	        		config.openEase
	        	);
	        	a.stop().delay(config.openSpeed * 0.1).animate(
	        		{
	        			width: a.data("textWidth")
	        		},
	        		config.openSpeed,
	        		config.openEase
	        	);
        	} else {
        		$(this).css("width", targetWidth);
        	}
        }
        function Out() {
        	var a = $(this).children(".button-overlay-link");
        	
        	if (config.animated) {
	        	$(this).stop().animate(
	            	{
	            		width: $(this).css("min-width")
	            	},
	            	config.closeSpeed,
	            	config.closeEase
	            );
	        	a.stop().animate(
		            {
		            	width: 0
		            },
		            config.closeSpeed * 0.85,
		            config.closeEase
		        );
		        
        	} else {
        		$(this).css("width", $(this).css("min-width"));
        	}
        }
        
    };

})(jQuery);