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("slow", function() {
            $(this).remove();
        })
    
    });
    
}

$(function() {
    
    $(".widget-1").middleBoxButton("Facade Lighting Gedung Merdeka", "http://www.semarakbandung.com/event/facade-lighting-gedung-merdeka/");
    $(".widget-2").middleBoxButton("Arketip Urban Art Instalation", "http://www.semarakbandung.com/event/arketip/");
    $(".widget-3").middleBoxButton("Payung.bdg", "http://www.semarakbandung.com/event/payung-bdg/");
    $(".widget-4").middleBoxButton("Ngariung.bdg", "http://www.semarakbandung.com/event/ngariung-bandung/");
	$(".widget-5").middleBoxButton("Resurrection", "http://www.semarakbandung.com/event/resurrection/");
	$(".widget-6").middleBoxButton("Piknik.bdg", "http://www.semarakbandung.com/event/piknik-bdg/");
	$(".widget-7").middleBoxButton("Bragakeun Bragaku", "http://www.semarakbandung.com/event/bragakeun-bragaku/");
	$(".widget-8").middleBoxButton("Nyala Merdeka", "http://www.semarakbandung.com/event/nyala-merdeka/");
	$(".widget-9").middleBoxButton("RekaKota", "http://www.semarakbandung.com/event/reka-kota/");

});