$(function () { 
	 $('#author')   
    // create our new span.hover and loop through anchor:
    .append('<span class="hover-author />').each(function () {
      var $span = $('> span.hover-author', this).css('opacity', 0);      
      // when the user hovers in and out 
      $(this).hover(function () {
        // on hover
        // stop any animations currently running, and fade to opacity: 1
        $span.stop().fadeTo(200, 1);
      }, function () {
        // off hover
        // again, stop any animations currently running, and fade out
        $span.stop().fadeTo(800, 0);
      });	 
	}); 

	 $('#twitter')   
    // create our new span.hover and loop through anchor:
    .append('<span class="hover-twitter" />').each(function () {
      var $span = $('> span.hover-twitter', this).css('opacity', 0);      
      // when the user hovers in and out 
      $(this).hover(function () {
        // on hover
        // stop any animations currently running, and fade to opacity: 1
        $span.stop().fadeTo(200, 1);
      }, function () {
        // off hover
        // again, stop any animations currently running, and fade out
        $span.stop().fadeTo(800, 0);
      });
	  $(this).click(function () {
		window.location = $(this).attr("url");
      });
    });
	 $('#facebook')   
    // create our new span.hover and loop through anchor:
    .append('<span class="hover-facebook" />').each(function () {
      var $span = $('> span.hover-facebook', this).css('opacity', 0);      
      // when the user hovers in and out 
      $(this).hover(function () {
        // on hover
        // stop any animations currently running, and fade to opacity: 1
        $span.stop().fadeTo(200, 1);
      }, function () {
        // off hover
        // again, stop any animations currently running, and fade out
        $span.stop().fadeTo(800, 0);
      });
	 
	});
		 $('#backhome').click(function () {
		window.location = $(this).attr("url");	 
	});
	$('ul#mainNav li a.home')   
    // create our new span.hover and loop through anchor:
    .append('<span class="hover-home" />').each(function () {
      var $span = $('> span.hover-home', this).css('opacity', 0);      
      // when the user hovers in and out 
      $(this).hover(function () {
        // on hover
        // stop any animations currently running, and fade to opacity: 1
        $span.stop().fadeTo(200, 1);
      }, function () {
        // off hover
        // again, stop any animations currently running, and fade out
        $span.stop().fadeTo(800, 0);
      });
	 });
	 $('ul#mainNav li a.about')   
    // create our new span.hover and loop through anchor:
    .append('<span class="hover-about" />').each(function () {
      var $span = $('> span.hover-about', this).css('opacity', 0);      
      // when the user hovers in and out 
      $(this).hover(function () {
        // on hover
        // stop any animations currently running, and fade to opacity: 1
        $span.stop().fadeTo(200, 1);
      }, function () {
        // off hover
        // again, stop any animations currently running, and fade out
        $span.stop().fadeTo(800, 0);
      });

	 
	});
	 $('ul#mainNav li a.blog')   
    // create our new span.hover and loop through anchor:
    .append('<span class="hover-blog" />').each(function () {
      var $span = $('> span.hover-blog', this).css('opacity', 0);      
      // when the user hovers in and out 
      $(this).hover(function () {
        // on hover
        // stop any animations currently running, and fade to opacity: 1
        $span.stop().fadeTo(200, 1);
      }, function () {
        // off hover
        // again, stop any animations currently running, and fade out
        $span.stop().fadeTo(800, 0);
      });

	 
	});
	 $('ul#mainNav li a.contact')   
    // create our new span.hover and loop through anchor:
    .append('<span class="hover-contact" />').each(function () {
      var $span = $('> span.hover-contact', this).css('opacity', 0);      
      // when the user hovers in and out 
      $(this).hover(function () {
        // on hover
        // stop any animations currently running, and fade to opacity: 1
        $span.stop().fadeTo(200, 1);
      }, function () {
        // off hover
        // again, stop any animations currently running, and fade out
        $span.stop().fadeTo(800, 0);
      });

	 
	});

});
var $el, $tempDiv, $tempButton, divHeight = 0;

$.fn.middleBoxButton = function(text, url) {
    
    return this.hover(function(e) {
    
        $el = $(this).css("border-color", "white");
        divHeight = $el.height() + parseInt($el.css("padding-top")) + parseInt($el.css("padding-bottom"));
                
        $tempDiv = $("<div />", {
            "class": "overlay rounded"
        });
                
        $tempButton = $("<a />", {
            "href": url,
            "text": text,
            "class": "widget-button rounded",
            "css": {
            "top": (divHeight / 2) - 7 + "px"
            }
        }).appendTo($tempDiv);
                
        $tempDiv.appendTo($el);
        
    }, function(e) {
    
        $el = $(this).css("border-color", "#999");
    
        $(".overlay").fadeOut("fast", function() {
            $(this).remove();
        })
    
    });
    
}

$(function() {
    
    $(".widget-one").middleBoxButton("Offline for maintenance :(", "#");
    $(".widget-two").middleBoxButton("Go to the Store", "#store");
    $(".widget-three").middleBoxButton("Continue", "#more");
    $(".widget-four").middleBoxButton("Behold!", "#bazinga");

});