CSS3+jQuery Buttons

coffeeButtons.coffee

$ = jQuery


###
    formatBytes function
    Takes in bytes as an int, does some maths
    Spits out bytes converted to the proper ammount and suffix
###
formatBytes = (bytes) ->
    sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']

    if bytes == 0
        return 'n/a'

    i = parseInt( Math.floor( Math.log( bytes ) / Math.log( 1024 ) ) )

    return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i]



$.fn.jButton = (options) ->
    defaults =
        evenColor: '#ccc'
        oddColor : '#eee'

    options = $.extend(defaults, options)
    @each ->
        # Get the file to download
        file = $( this ).attr("file");

        # Append all the needed tags
        $( this ).append($("<a>").attr("href",file)
                                 .text("Download"))
                 .append($("<p>").attr("class","top"))
                 .append($("<p>").attr("class","bottom"));

        # Assign $this to button for use inside the ajax function
        button = $( this )

        # Get the size and type of the file, then put it into the relevent tag
        req = $.ajax({
            type: "HEAD",
            url:  file,
            success: () ->
                $(".top", button).text("Type: " + req.getResponseHeader( "Content-Type" ) );
                $(".bottom", button).text("Size: " + formatBytes(req.getResponseHeader( "Content-Length" ) ) );
        })