/* - - - - - - - - - - - - - - - - - - - - - - - - -
    social media
- - - - - - - - - - - - - - - - - - - - - - - - - -*/

//vars
var facebookOpen = false;
var twitterOpen = false;
var facebookLoading = false;
var twitterLoading = false;

//MOUSE ACTIONS
function loadSocialMediaFunctions() {
    //facebook actions
    $("#facebook, #twitter").mouseover(function() {
        if ((!facebookLoading && $(this).attr("id") == "facebook") || (!twitterLoading && $(this).attr("id") == "twitter")) {
            $(this).css("background-position", "-62px 0px");
            $(this).css("top", "2px");
        } 
    });
    $("#facebook, #twitter").mouseout(function() {
        if ((!facebookLoading && $(this).attr("id") == "facebook") || (!twitterLoading && $(this).attr("id") == "twitter")) {
            $(this).css("background-position", "0px 0px");
            $(this).css("top", "0px");
        }
    });
    $("#facebook, #twitter").mousedown(function() {
        if ((!facebookLoading && $(this).attr("id") == "facebook") || (!twitterLoading && $(this).attr("id") == "twitter")) {
            $(this).css("background-position", "-124px 0px");
            $(this).css("top", "4px");
        }
    });
    $("#facebook, #twitter").mouseup(function() {
        
        if ((!facebookOpen && $(this).attr("id") == "facebook") || (!twitterOpen && $(this).attr("id") == "twitter")) {
            $(this).css("background-position", "-186px 0px");
            $(this).css("top", "2px");
            loadSocialMedia($(this).attr("id"));
            if ($(this).attr("id") == "facebook") { facebookOpen = true; facebookLoading = true; }
            if ($(this).attr("id") == "twitter") { twitterOpen = true; twitterLoading = true; }
            $("#" + $(this).attr("id") + " .socialmedia_loading").show();
            $("#" + $(this).attr("id") + " .socialmedia_loading").empty();
            $("#" + $(this).attr("id") + " .socialmedia_loading").japing({
                id: 'preloader',
                width: 20,
                height: 20,
                frames: 24,
                spritePath: '/assets/img/sprite_loader.png'
            });
        }
        
        if ($(this).attr("id") == "facebook" && !facebookLoading && facebookOpen) {
            closeFacebook()
        }
        if ($(this).attr("id") == "twitter" && !twitterLoading && twitterOpen) {
            closeTwitter()
        }
    });

    //close actions
    $("#facebook_container .socialmedia_close").click(function() {
        closeFacebook();
    });
    $("#twitter_container .socialmedia_close").click(function() {
        closeTwitter();
    });

    //socialmedia_close
    $(".socialmedia_close").mouseover(function() {
        $(this).css("background-position", "-22px 0px");
        $(this).css("top", "-9px");
    });
    $(".socialmedia_close").mouseout(function() {
        $(this).css("background-position", "0px 0px");
        $(this).css("top", "-11px");
    });
    $(".socialmedia_close").mousedown(function() {
        $(this).css("background-position", "-44px 0px");
        $(this).css("top", "-7px");
    });
    $(".socialmedia_close").mouseup(function() {
        $(this).css("background-position", "-22px 0px");
        $(this).css("top", "-9px");
    });
};

function closeFacebook() {
    facebookOpen = false;
    $("#facebook").css("background-position", "0px 0px");
    $("#facebook").css("top", "0px");
    $("#facebook_container").hide();
}

function closeTwitter() {
    twitterOpen = false;
    $("#twitter").css("background-position", "0px 0px");
    $("#twitter").css("top", "0px");
    $("#twitter_container").hide();
}

//LOAD SOCIALMEDIA
function loadSocialMedia(media) {
    $.ajax({
        url: "/public/handlers/SocialMediaHandler.ashx?media=" + media,
        success: function(data) {
            $('#' + media + '_container .socialmedia_content').html(data);
            $('#' + media + '_container').show();
            $('#' + media + '').css("background-position", "0px 0px");
            $('#' + media + ' .socialmedia_loading').hide();
            if (media == "facebook") {
                facebookLoading = false;
            } if (media == "twitter") {
                twitterLoading = false;
            }
            $("#" + media).css("background-position", "0px 0px");
            $("#" + media).css("top", "0px");
        },
        error: function() {
            alert("Er is een fout gebeurd bij het ophalen van " + media);
        }
    });
}

//Check if there are new messages
function checkNewMessages() {
    /*<div class="new_messages"><span><%=nrNewMessagesFB %></span></div>*/
    $.ajax({
        url: '/public/handlers/SocialMediaHandler.ashx?media=facebook&content=new_messages',
        success: function(data) {
            if (data != "0") {
                $('#facebook').append("<div class=\"new_messages\"><span>" + data + "</span></div>");
                animateMessageBubble("facebook");
            }
        }
    });
    $.ajax({
        url: '/public/handlers/SocialMediaHandler.ashx?media=twitter&content=new_messages',
        success: function(data) {
            if (data != "0") {
                $('#twitter').append('<div class="new_messages"><span>' + data + '</span></div>');
                animateMessageBubble("twitter");
            }
        }
    });
}

function animateMessageBubble(media) {
    //new_messages
    var countNewMessages = -10;
    var fbNewMsgs = ["0px 0px", "-26px 0px", "-52px 0px", "-78px 0px", "-104px 0px", "-156px 0px", "-104px 0px", "-78px 0px", "-104px 0px"];
    var refreshIntervalId = setInterval(function() {
        countNewMessages++;
        if (countNewMessages >= 10) {
            $("#" + media + " .new_messages span").show();
            clearInterval(refreshIntervalId);
        }
        $("#"+media+" .new_messages").css("background-position", fbNewMsgs[countNewMessages]);
    }, 100);
}