/// <reference name="MicrosoftAjax.js"/>

var
    $imageCommentTemplate,
    $imageViewer,
    $numberOfCommentsHeading,
    $imageCommentsContainer,
    $albumUserInfo,
    $albumLink,
    $albumInfo,
    $enlargeImageLink,
    $locationName,
    imageViewerControl,
    viewAlbumBaseUrl;

Sys.Application.add_load
(
    function()
    {
        // Initialize fields
        $imageCommentTemplate = $('#image-comment-template-container div.image-comment');
        $imageViewer = $('#main div.image-viewer');
        $numberOfCommentsHeading = $('#number-of-comments');
        $imageCommentsContainer = $('#image-comments-container');
        $albumUserInfo = $('#album-user-info');
        $albumLink = $('#album-link');
        $albumInfo = $('#album-info');
        $locationName = $('#location-name');
        $enlargeImageLink = $imageViewer.find('table.commands a.enlarge');
        imageViewerControl = $imageViewer.get(0).control;
        googleComponent = $('div.google-map').get(0).control;

        // Bind to ImageViewer events
        imageViewerControl.add_commentsChanged(imageViewerCommentsChanged);
        imageViewerControl.get_imageSlider().add_selectedImageChanged(imageSliderSelectedImageChanged);
    }
);

function imageSliderSelectedImageChanged(sender, args)
{
    var selectedStarImageControl = imageViewerControl.get_imageSlider().get_currentImage().control;
    googleComponent.setImageGalleryMarkerPosition(selectedStarImageControl.get_ImageGalleryPosition().Latitude, selectedStarImageControl.get_ImageGalleryPosition().Longitude, selectedStarImageControl.get_ZoomLevel(), globalResourceTextInstance.tipsAlbum + ": " + selectedStarImageControl.get_ImageGalleryName());
    $albumLink.html(selectedStarImageControl.get_ImageGalleryName()).attr('href', selectedStarImageControl.get_ImageGalleryUrl());
    $locationName.html(selectedStarImageControl.get_ImageGalleryLocationName());
    $albumUserInfo.find('img.portrait').attr('src', selectedStarImageControl.get_UploaderAvatarImageUrl()).attr('title', selectedStarImageControl.get_UploaderAlias());
    $albumUserInfo.find('a.user-name, a.tui-link').attr('title', selectedStarImageControl.get_UploaderAlias()).attr('href', selectedStarImageControl.get_UploaderRemoved() ? 'javascript:void(0)' : selectedStarImageControl.get_UploaderProfilePageUrl());
    $albumUserInfo.find('a.user-name').html(selectedStarImageControl.get_UploaderAlias()).css('color', selectedStarImageControl.get_UploaderRemoved() ? '#444444' : '#0069A6').css('text-decoration', selectedStarImageControl.get_UploaderRemoved() ? 'none' : 'underline').css('cursor', selectedStarImageControl.get_UploaderRemoved() ? 'default' : 'pointer');
    $albumUserInfo.find('span.date').html(selectedStarImageControl.get_UploadDate());
    if (selectedStarImageControl.get_UploaderRemoved())
    {
        $albumInfo.hide();
    }
    else
    {
        $albumInfo.show();
    }
    if (selectedStarImageControl.get_IsTuiStaff())
    {
        $albumUserInfo.find('a.tui-link').show();
    }
    else
    {
        $albumUserInfo.find('a.tui-link').hide();
    }
}

function imageViewerCommentsChanged(sender, args)
{
    var
        comments = args.get_comments(),
        comment,
        $nextComment,
        $nextPanel,
        commentPanelComponent;
    
    $numberOfCommentsHeading.empty();
    $imageCommentsContainer.empty();

    updateCommentHeading(comments.length);
    
    for (key in comments)
    {
        comment = comments[key];
        $nextComment = $imageCommentTemplate.clone();
        $nextComment.attr('id', 'image-comment-' + comment.id);
        $imageCommentsContainer.append($nextComment);
        
        // Prepare the panel target element
        $nextPanel = $nextComment.find('div.panel-tip');
        $nextPanel.attr('id', 'panel-comment-' + comment.id);
        
        // Create and fill the right comment panel
        commentPanelComponent = new TUI.Web.UI.WebControls.Panel($nextPanel.get(0));
        commentPanelComponent.beginUpdate();
        commentPanelComponent.set_innerHtmlCenter(String.format("<div class='arrow-left'></div><h3>{0}</h3><div class='content'>{1}</div>", comment.title, comment.content));
        
        if (comment.authorID == currentAuthorID || currentUserIsAdmin)
        {
            commentPanelComponent.set_innerHtmlBottom(String.format("<table cellspacing='0'><tr><td class='first last'><a class='delete' href='javascript:void(0)' rel='{0}' title='{1}'>{1}</a></td></tr></table>", comment.id, globalResourceTextInstance.tipsCommentDelete));
            $nextPanel.find('div.panel-bottom').addClass('panel-bottom-commands').find('a.delete').click( removeImageComment );
        }
        
        commentPanelComponent.endUpdate();
        
        // Update the album owner section
        $nextComment.find('img.portrait').attr('src', comment.userAvatarImageUrl).attr('title', comment.userAlias);
        $nextComment.find('a.user-name').html(comment.userAlias).attr('title', comment.userAlias).attr('href', comment.userRemoved ? 'javascript:void(0)' : comment.userProfilePageUrl);
        $nextComment.find('a.user-name').html(comment.userAlias).css('color', comment.userRemoved ? '#444444' : '#0069A6').css('text-decoration', comment.userRemoved ? 'none' : 'underline').css('cursor', comment.userRemoved ? 'default' : 'pointer');
        $nextComment.find('a.user-logo').attr('href', comment.userRemoved ? 'javascript:void(0)' : comment.userProfilePageUrl);
        $nextComment.find('span.date').html(comment.updatedDate.toString());
        
        if (comment.userIsTuiStaff) 
        {
            $nextComment.find('a.user-logo').show();
        }
        else 
        {
            $nextComment.find('a.user-logo').hide();
        }
    }
}

function updateCommentHeading(numberOfComments)
{
    if (numberOfComments > 0)
    {
        $numberOfCommentsHeading.html(String.format("{0} {1}", numberOfComments, numberOfComments > 1 ? globalResourceTextInstance.tipsComments : globalResourceTextInstance.tipsComment));
    }
    else
    {
        $numberOfCommentsHeading.empty();
    }
}

function removeImageComment()
{
    TUI.TipsCommunity.Templates.AjaxHandlers.Util.RemoveStarImageComment(this.rel, commentOperationNormalCallback, Type.emptyFunction, this.rel);
}

function commentOperationNormalCallback(removalSuccessfull, context)
{
    if (removalSuccessfull)
    {
        // Also remove on client
        $imageCommentsContainer.find('#image-comment-' + context).remove();
        updateCommentHeading($imageCommentsContainer.children().length);
    }
}