var $bar;

$(function(){
    
    GenerateBar();
    
});


function GenerateBar() {
    
    // Browser width
    var width = $(window).width();
    
    // Style
    var $style = "border: 1px solid #ccc; background-color: #FFF; text-align:center;", vertical=false, horizontal=false;
    
    // Width
    if(width >= 1200) {
        var vertical = true;
        $style += " left: 10px; top:200px; width:70px; position: absolute; box-shadow:1px 1px 3px #ccc; padding: 5px;";
    } else {
        var horizontal = true;
        $style += " bottom:0; right:10px; width: auto; position: fixed; box-shadow:-1px 1px 3px #ccc; padding: 15px 10px 10px 10px;";
    }
    
    // Generates bar
    $bar = $("<div/>", {
        id: "#social-media-bar",
        style: $style,
    }).appendTo($("body"));
    
    // Google Plus
    addGooglePlus();
    
    // Twitter
    addTwitter();
    
    // Facebook
    addFacebook();
    
    // Spacing buttons according to box style
    var box_style;
    
    if(vertical) {
        
        // Box Style
        box_style = "clear:both; margin:15px 0 5px 0;";
        
        // Adds Class
        $bar.addClass("ui-corner-all");
        
        // Scrolling Features
        scrollingFeatures();
        
    } else {
        
        // Box Style
        box_style = "display:block; width:55px; text-align:center; float:left; margin:0 10px;";
        
        // Adds corner class
        $bar.addClass("ui-corner-top");
        
    }
    
    // Sets style of the box that was just defined
    $("div", $bar).attr("style", box_style);
    
}

function createDiv() {
    return $("<div/>").appendTo($bar);
}

function addGooglePlus() {
    
    // Appends script
    $("<script/>", {
        type: "text/javascript",
        src: "https://apis.google.com/js/plusone.js"
    })
    .appendTo($("body"));
    
    // Places button on bar
    $("<div/>", {
        'data-size': "tall",
        class: "g-plusone"
    })
    .appendTo(createDiv());
    
}

function addTwitter() {
    
    // Appends script
    $("<script/>", {
        type: "text/javascript",
        src: "http://platform.twitter.com/widgets.js"
    })
    .appendTo($("body"));
    
    
    // Places button on bar
    $("<a/>", {
        href: "http://twitter.com/share",
        class: "twitter-share-button",
        'data-count': 'vertical',
        html: "Tweet"
    }).appendTo(createDiv());
    
}

function addFacebook() {
    
    // Stores proper markup in a variable
    var div = $("<div/>", {
        id: "fb-root"
    }).appendTo($("body"));
    
    var iframe = '<div class="fb-like" data-send="false" data-layout="box_count" data-width="50" data-show-faces="true" data-font="arial"></div>';
    
    // Appends iframe to our social media bar
    createDiv().html(iframe);
    
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js#appId=236189379765387&xfbml=1";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
    
}

function scrollingFeatures() {
    // Scrolling features
    var offset = $bar.offset();
    var topPadding = 30;
    $(window).scroll(function() {
        if ($(window).scrollTop() > offset.top) {
            $bar.stop().animate({
                marginTop: $(window).scrollTop() - offset.top + topPadding
            });
        } else {
            $bar.stop().animate({
                marginTop: 0
            });
        };
    });
}