// CodePax.com - Tutorial page actions

var activeElement = null;
var previewDocument = null; $('#previewDocument');
var mainDocument = null; $('#mainDocument');

showPreviewDocument = function(element)
{
    element = $(element);

    if ((activeElement != null) && (element.get()[0] == activeElement.get()[0]))
        return 'skip';

    if (activeElement)
        activeElement.removeClass('activeElement');

    element.addClass('activeElement');
    activeElement = element;

    previewDocument.empty();
    // previewDocument.append('<p>Loading, please wait... </p>');

    previewDocument.css({
        height: 'auto'
    });

    targetY = element.offset().top - 10;
    var targetX = mainDocument.offset().left + mainDocument.width() + 10;
    previewDocument.css({
        top:targetY + 'px',
        left:targetX
        });

    closeLink = $('<a id="closeTutorialLink" href="#"></a>');

    previewDocument.append(closeLink);

    closeLink.bind("click", {}, function() {
        // previewDocument.animate({width: 'hide'}, 'fast');
        previewDocument.hide();
        if (activeElement)
        {
            activeElement.removeClass('activeElement');
            activeElement = null;
        }
        return false;
    });

    previewDocument.show();
}

discussClick = function(eventObject)
{
    var imgDiscuss = $(eventObject.target);

    if ('skip' == showPreviewDocument(imgDiscuss))
        return;

    var discussionTitle = imgDiscuss.attr('title');
    var id = imgDiscuss.attr('id');
    discussion_md5 = id.split('_').pop();

    // console.log('Displaying thread "' + discussion_md5 + '"');
    var discussionDiv = $('#discussion_' + discussion_md5);

    discussionLink = $('<a id="openTutorialLink" class="previewLinkOpen activeElement large" href="#">'+
            discussionTitle +'</a>');

    var clonedDiscussionDiv = discussionDiv.clone();

    previewDocument.append(discussionLink);
    previewDocument.append(clonedDiscussionDiv);

    selectedDiscussionValue = discussionDiv.find('#dis-idDiscussion').val();

    // Append the form
    commentForm = $('#commentForm').clone();
    commentForm.attr('id', 'currentlyActiveCommentForm');

    previewDocument.append(commentForm);
    commentForm.show();

    // Select the discussion
    $('#idDiscussion-label').remove();
    $('#idDiscussion-element').remove();

    var href = "/comments/addEdit";

    commentForm.ajaxForm({
        url: href,
        dataType: 'json', 
        type: 'post',
        // clearForm: true,
        beforeSubmit: function(data) {
            commentForm.find('.errors').remove();
            data.push({name: 'idDiscussion', value: selectedDiscussionValue});
            return data;
        },
        success: function (data) {
            if (data.errors)
            {
                jQuery.each(data.errors, function(fieldName, errors) {
                    var errorsList = $('<ul class="errors"></ul>');
                    // console.log(fieldName, errors);
                    var fieldInstance = commentForm.find('#' + fieldName);

                    jQuery.each(errors, function(errorID, errorMessage) {
                        errorsList.append('<li>' + errorMessage + '</li>');
                    });
                    // console.log(fieldInstance);
                    fieldInstance.after(errorsList);
                });
                // console.log(data.errors);
            }
            else if (data.success)
            {
                // Add the comment as the last node on both the cloned and the original list.
                comment = data.comment;

                clonedDiscussionList = clonedDiscussionDiv.find('ul.comments');
                originalDiscussionList = discussionDiv.find('ul.comments');

                newComment = $('<li>' + comment + '</li>');

                clonedDiscussionList.append(newComment.clone());
                originalDiscussionList.append(newComment.clone());

                console.log(commentForm);
                commentForm.clearForm();
            }
        },
        error: function (data) {
           // console.log(data);
       }
    });
}

seeAlsoClick = function(eventObject)
{
    var link = $(eventObject.target);

    if ('skip' == showPreviewDocument(link))
        return;

    var href = link.attr('href');
    var title = link.html();

    previewLink = $('<a id="openTutorialLink" class="previewLinkOpen activeElement large" href="#"></a>');
    previewLink.html('Open <strong>'+title+'</strong> &rarr;').attr('href', href);
    previewDocument.append(previewLink);

    // previewDocument.animate({width: 'show'}, 'fast');

    // Load the tutorial via an ajax request from the href...
    $.ajax({
        type		: 'GET',
        url			: href, 
        dataType	: "json",
        success: function (data) {
            var newNode = $(data);
            previewDocument.append(newNode);
        },
        error: function(data) {
            // document.location = href;
        }
    });

    return false;
}

var linkAction = function (evtObject)
{
    var clickedLink = $(evtObject.target);
    var actionCallback = evtObject.data.callback;
    var blinkCount = 0;
    var timeoutID = null;

    clickedLink.addClass("blinky");

    var mouseLeave = function ()
    {
        clearInterval(timeoutID);
        clickedLink.removeClass("blinky");
    }

    var toggleVisibility = function()
    {
        clickedLink.toggleClass("blinky");
        blinkCount++;

        if (blinkCount >= 4)
        {
            mouseLeave();
            actionCallback(evtObject);
        }
    }

    // Start blinking once every .1 seconds 5 times
    // timeoutID = setTimeout("toggleVisibility()", 1000);
    timeoutID = setInterval(toggleVisibility, 100);

    clickedLink.bind("mouseout", {}, mouseLeave)
    return false;
}

$(document).ready(function() {

    previewDocument = $('#previewDocument');
    mainDocument = $('#mainDocument');

    previewDocument.hide();

    $('#mainDocument a[rel=seealso]').bind("mouseover", {
        callback: seeAlsoClick
    }, linkAction);

    $('#mainDocument img.discussion').bind("mouseover", {
        callback: discussClick
    }, linkAction);
});