///<reference name="MicrosoftAjax.js" />
///<reference path="jquery-1.2.6-vsdoc.js" />
///<reference path="~/js/AdCouncilClasses.js" />
///<reference path="~/svc/ObjectModelService.svc" />

Type.registerNamespace("AdCouncil");

AdCouncil.IndividualCardPage = function(options) {
    this.initialize(options);
}

AdCouncil.IndividualCardPage.prototype = {
    enumShareExtendMode: {
        optionsHidden: 0,
        downloadOptionsShown: 1,
        emailOptionsShown: 2,
        emailConfirmationShown: 3
    },

    enumImageTypes: {
        WebBrowse: "Web_Browse",
        WebHero: "Web_Hero",
        WebRollover: "Web_Rollover",
        WebThumbnail: "Web_Thumbnail",
        DownloadDesktopLarge: "Download_DesktopLarge",
        DownloadDesktopMedium: "Download_DesktopMedium",
        DownloadPhone: "Download_Phone",
        DownloadThumb: "Download_Thumb",
        DownloadPhoneThumb: "Download_PhoneThumb"
    },

    _options: null,
    tag: null,
    videoID: null,
    $moveDiv: null,

    cardController: null,

    getDefaultOptions: function() {
        return {
            issueTag: null,
            videoID: null,
            title: null,
            imageSources: null,
            trackingBase: ""
        };
    },

    initialize: function(options) {
        this.setProperties(options);

        this.setupSliders();
        this.setupCommentsPanel();
        this.setupCardNavigation();

        this.populateCards();
    },

    setProperties: function(options) {
        this._options = this.getDefaultOptions();
        AdCouncil.Utilities.addDict(this._options, options);
        this.tag = this._options.issueTag;
        this.videoID = this._options.videoID;
        this.cardController = new AdCouncil.CalloutCardsController({ formatHandler: Function.createDelegate(this, this.browseFormatter) });
    },

    setupSliders: function() {
        this.$cardsSlider = $('div.cards-slider');

        this.scrollUnit = -parseInt($('div.cards-table').height());

        this.$scrollDown = $('div.scroll-down a');
        this.$scrollDown.css('display', 'none');

        this.$scrollUp = $('div.scroll-up a');
        this.$scrollUp.css('display', 'none');

        this.scrollCount = 0;

        this.$scrollDown.click(Function.createDelegate(this, this.onScrollDown));
        this.$scrollUp.click(Function.createDelegate(this, this.onScrollUp));
    },

    onScrollDown: function(event) {
        this.scrollCount++;
        var scrollAmount = this.scrollUnit * this.scrollCount;
        scrollAmount = parseInt(scrollAmount);
        if (scrollAmount >= this.getMaxScroll()) {
            if (this.scrollCount == 1)
                this.$scrollUp.fadeIn('slow');
            scrollAmount = scrollAmount + 'px';
            this.$cardsSlider.animate({ top: scrollAmount }, 'slow');

            if (this.scrollUnit * (this.scrollCount + 1) < this.getMaxScroll()) {
                this.$scrollDown.fadeOut('slow');
            }
        }
        else {
            this.scrollToTop();
        }
        this.$scrollDown.blur();
    },

    onScrollUp: function(event) {
        if (this.scrollCount != 0) {
            this.scrollCount--;
            var scrollAmount = this.scrollUnit * this.scrollCount;
            scrollAmount = parseInt(scrollAmount);
            scrollAmount = scrollAmount + 'px';
            this.$cardsSlider.animate({ top: scrollAmount }, 'slow');
            if (this.scrollCount == 0)
                this.$scrollUp.fadeOut('slow');

            if (this.scrollUnit * (this.scrollCount + 1) >= this.getMaxScroll()) {
                this.$scrollDown.fadeIn('slow');
            }
        }
        else {
            return false;
        }
    },

    getMaxScroll: function() {
        var cs_height = this.$cardsSlider.height();
        var maxScroll = -(cs_height + this.scrollUnit);
        return maxScroll;
    },

    scrollToTop: function() {
        this.scrollCount = 0;
        this.$scrollUp.fadeOut('slow');
        if (this.scrollUnit < this.getMaxScroll()) {
            this.$scrollDown.fadeOut('slow');
        }
        else {
            this.$scrollDown.fadeIn('slow');
        }
        this.$cardsSlider.animate({ top: '0px' }, 'normal');
    },

    setupCommentsPanel: function() {
        /*animate inital comments*/
        var $cardBigComments = $('div.card-big-comments');
        $cardBigComments.css('visibility', 'visible');

        /*start share overlay code*/
        var $shareDownload = $('a.download');
        var $shareEmail = $('a.e-mail');
        var shareExtend = document.createElement('div');
        shareExtend.className = 'share-extend';
        shareExtend.innerHTML = '<div class="share-extend-bg"></div>';
        $(shareExtend).insertAfter('div.card-big-footer ul');
        this.$moveDiv = $('.share-extend');
        this.$innerMoveDiv = $('.share-extend-bg');

        $shareDownload.click(Function.createDelegate(this, this.onShareDownloadClicked));
        $shareEmail.click(Function.createDelegate(this, this.onShareEmailClicked));

        var myspaceDelegate = Function.createDelegate(this, this.onPostToMySpaceClicked);
        var content = '<img src="' + this._options.imageSources[this.enumImageTypes.WebHero] + '" >';

        var myspaceOpts = {
            title: this._options.title,
            content: content,
            url: window.location.href
        }
        var myspaceCallback = Function.createCallback(myspaceDelegate, myspaceOpts);

        $('a.myspace').click(myspaceCallback);

        var facebookDelegate = Function.createDelegate(this, this.onPostToFacebookClicked);
        var facebookOpts = {
            url: this._options.imageSources[this.enumImageTypes.WebHero],
            title: this._options.title
        };
        var facebookCallback = Function.createCallback(facebookDelegate, facebookOpts);
        $('a.facebook').click(facebookCallback);

        this.$moveDiv.click(function(event) {
            event.stopPropagation();
        });

        var hideHandler = Function.createDelegate(this, this.hideShareExtend);
        $('body').click(hideHandler);

    },

    onPostToMySpaceClicked: function(evt, paramObj) {
        AdCouncil.Utilities.postToMySpace(paramObj);
        RGA.Event.fire(gTrackEvent, String.format(this._options.trackingBase, "myspace"));
    },

    onPostToFacebookClicked: function(evt, paramObj) {
        AdCouncil.Utilities.postToFacebook(paramObj);
        RGA.Event.fire(gTrackEvent, String.format(this._options.trackingBase, "facebook"));
    },

    onShareDownloadClicked: function(evt) {
        evt.stopPropagation();
        if (this.getShareExtendMode() == this.enumShareExtendMode.downloadOptionsShown) this.hideShareExtend();
        else {
            RGA.Event.fire(gTrackEvent, String.format(this._options.trackingBase, "downloadstart"));
            var templateSB = new Sys.StringBuilder();
            templateSB.append('<div class="download-cards">');

            templateSB.append('<div class="left">');
            templateSB.append('<a href="DownloadCard.ashx?videoID={videoID}&assetType={linkDownloadDesktopLarge}" trackingHint="desktop"><img src="{imgDownloadThumb}" width="88" height="70" border="0" alt="" title=""></a><br><p><a href="DownloadCard.ashx?videoID={videoID}&assetType={linkDownloadDesktopLarge}" trackingHint="desktop">Desktop(Large)</a></p>');
            templateSB.append('</div>');

            templateSB.append('<div class="left">');
            templateSB.append('<a href="DownloadCard.ashx?videoID={videoID}&assetType={linkDownloadDesktopMedium}" trackingHint="desktop"><img src="{imgDownloadThumb}" width="88" height="70" border="0" alt="" title=""></a><br><p><a href="DownloadCard.ashx?videoID={videoID}&assetType={linkDownloadDesktopMedium}" trackingHint="desktop">Desktop(Med.)</a></p>');
            templateSB.append('</div>');

            templateSB.append('<div class="left">');
            templateSB.append('<a href="DownloadCard.ashx?videoID={videoID}&assetType={linkDownloadPhone}" trackingHint="phone"><img src="{imgDownloadPhoneThumb}" width="50" height="69" border="0" alt="" title=""></a><br><p><a href="DownloadCard.ashx?videoID={videoID}&assetType={linkDownloadPhone}" trackingHint="phone">Phone Background</a></p>');
            templateSB.append('</div>');

            templateSB.append('</div>');

            var downloadHTML = templateSB.toString();

            downloadHTML = downloadHTML.replace(/\{videoID\}/g, this.videoID);
            downloadHTML = downloadHTML.replace(/\{linkDownloadDesktopLarge\}/g, this.enumImageTypes.DownloadDesktopLarge);
            downloadHTML = downloadHTML.replace(/\{linkDownloadDesktopMedium\}/g, this.enumImageTypes.DownloadDesktopMedium);
            downloadHTML = downloadHTML.replace(/\{linkDownloadPhone\}/g, this.enumImageTypes.DownloadPhone);
            downloadHTML = downloadHTML.replace(/\{imgDownloadThumb\}/g, this._options.imageSources[this.enumImageTypes.DownloadThumb]);
            downloadHTML = downloadHTML.replace(/\{imgDownloadPhoneThumb\}/g, this._options.imageSources[this.enumImageTypes.DownloadPhoneThumb]);

            this.showShareExtend(downloadHTML, this.enumShareExtendMode.downloadOptionsShown);
        }
    },

    onShareEmailClicked: function(evt) {
        evt.stopPropagation();
        if (this.getShareExtendMode() == this.enumShareExtendMode.emailOptionsShown) this.hideShareExtend();
        else {
            RGA.Event.fire(gTrackEvent, String.format(this._options.trackingBase, "emailstart"));
            var templateSB = new Sys.StringBuilder();
            templateSB.appendLine('<ul class="e-mail">');
            templateSB.appendLine('<li><p>Friend\'s E-mail</p> <input type="text" class="email" id="inpToEmail" maxlength="64"></li>');
            templateSB.appendLine('<li><p>Your First Name</p><input type="text" class="name" id="inpFromFirstName" maxlength="32"></li><li><p>Your Last Initial</p><input type="text" id="inpFromLastInitial" class="lastInitial" maxlength="1"></li>');
            templateSB.appendLine('</ul>');
            templateSB.appendLine('<button class="btn_send" id="btnSendEmail"><img src="img/send.gif" width="48" height="18" border="0" alt="Send" title="Send"></button>');

            var emailHTML = templateSB.toString();
            this.showShareExtend(emailHTML, this.enumShareExtendMode.emailOptionsShown);
        }
        return false;
    },

    showShareExtend: function(HTML, mode) {
        this.setShareExtendMode(mode);
        var callbackFunction = Function.createDelegate(this, this.onShareExtendPanelShown);
        var $moveDiv = this.$moveDiv;
        var $innerMoveDiv = this.$innerMoveDiv;
        var currentLeft = $moveDiv.css('left');
        currentLeft = parseInt(currentLeft);
        if (currentLeft != -9999) {
            $moveDiv.css('left', '50px');
            $moveDiv.animate({ height: '0px' }, 'slow', function() { $innerMoveDiv.empty(); $innerMoveDiv.html(HTML); });
            $moveDiv.animate({ height: '140px' }, 'slow', callbackFunction);
        } else {
            $moveDiv.css('left', '50px');
            $innerMoveDiv.html(HTML);
            $moveDiv.animate({ height: '140px' }, 'slow', callbackFunction);
        }
    },

    hideShareExtend: function() {
        this.setShareExtendMode(this.enumShareExtendMode.optionsHidden);
        var $moveDiv = this.$moveDiv;
        var $innerMoveDiv = this.$innerMoveDiv;
        var currentLeft = $moveDiv.css('left');
        currentLeft = parseInt(currentLeft);
        if (currentLeft != -9999) {
            $moveDiv.animate({ height: '0px' }, 'slow', function() { $innerMoveDiv.empty(); $moveDiv.css('left', '-9999px'); });
        }
        // Don't return false or footer links will stop working.
        //return false;
    },

    onShareExtendPanelShown: function() {
        if (this.getShareExtendMode() == this.enumShareExtendMode.emailOptionsShown) this.onEmailPanelShown();
        if (this.getShareExtendMode() == this.enumShareExtendMode.emailConfirmationShown) this.onEmailConfirmationShown();
        if (this.getShareExtendMode() == this.enumShareExtendMode.downloadOptionsShown) this.onDownloadOptionsShown();
    },

    onDownloadOptionsShown: function() {
        var delegate = Function.createDelegate(this, this.onDownloadLinkClicked);
        $('a[@trackinghint]', this.$innerMoveDiv).click(delegate);
    },

    onDownloadLinkClicked: function(evt) {
        var hint = $(evt.target).attr('trackingHint') || $(evt.target).parents('@trackinghint').attr('trackingHint');
        var href = $(evt.target).attr('href') || $(evt.target).parents('@trackinghint').attr('href');

        RGA.Event.fire(gTrackEvent, String.format(this._options.trackingBase, "downloadcomplete/" + hint));
        // Delay the link to allow the tracking event to fire in Google Chrome.
        setTimeout(function() { location.href = href; }, 100);
        return false;
    },

    onEmailPanelShown: function() {
        $('#btnSendEmail').click(Function.createDelegate(this, this.onSendEmailClicked));
    },

    onEmailConfirmationShown: function() {
        $('#ancEmailSendAnother').click(Function.createDelegate(this, this.onShareEmailClicked));
        $('#ancEmailQuit').click(Function.createDelegate(this, this.hideShareExtend));
        RGA.Event.fire(gTrackEvent, String.format(this._options.trackingBase, "emailsent"));
    },

    onSendEmailClicked: function(evt) {
        var $inpFromFirstName = $('#inpFromFirstName');
        var firstname = $inpFromFirstName.val();

        var $inpFromLastInitial = $('#inpFromLastInitial');
        var lastinitial = $inpFromLastInitial.val();

        var $toEmail = $('#inpToEmail');
        var toEmail = $toEmail.val();

        var videoID = this.videoID;

        var reEmail = new RegExp("^[^\@]+\@[^\.]+\..+$");
        var isValid = true;

        // NOTE: make sure the "&&isValid" is at the end or it'll short-circuit the tests.
        isValid = this.validateField($toEmail, reEmail.test(toEmail), 'Invalid email address.') && isValid;
        isValid = this.validateField($inpFromFirstName, firstname.trim() != '', 'Missing first name.') && isValid;
        isValid = this.validateField($inpFromLastInitial, lastinitial.trim() != '', 'Missing last initial.') && isValid;

        if (!isValid) return false;

        var fromName = String.format("{0} {1}", firstname, lastinitial);

        var onSuccess = Function.createDelegate(this, this.onEmailSentSuccess);
        var onFailure = Function.createDelegate(this, this.onEmailSentFailure);
        var userContext = null;

        $('.e-mail .email, .btn_send, .name, .lastInitial').attr('disabled', 'disabled', 'disabled', 'disabled');

        AdCouncil.Services.ObjectModelService.EmailCalloutCard(videoID, fromName, toEmail, onSuccess, onFailure, userContext);
        return false; //Why was this here in the first place? 10.18.2009
    },

    validateField: function($field, validator, message) {
        if (validator) {
            // Reset field.
            $field.attr('title', '').css('background-color', '');
        }
        else {
            // Error-ify field.
            $field.css("background-color", "pink").attr('title', message);
        }
        return validator;
    },

    onEmailSentSuccess: function(response) {
        if (!response.Success) this.onEmailSentFailure(response);
        var emailSentHTML = '<div class="e-mail"><p class="confirmation">Your message has been sent.<br><a href="#" id="ancEmailSendAnother">Send another</a>&nbsp;&nbsp;<a href="#" id="ancEmailQuit">Close</a></p></div>';
        this.showShareExtend(emailSentHTML, this.enumShareExtendMode.emailConfirmationShown);
    },

    onEmailSentFailure: function(response) {
        window.alert("Sorry, your email could not be sent.");
        AdCouncil.Utilities.log(response.ErrorMessage);
    },

    setShareExtendMode: function(mode) {
        this.$moveDiv.data('shareExtendMode', mode);
    },

    getShareExtendMode: function() {
        return this.$moveDiv.data('shareExtendMode');
    },

    setupCardNavigation: function() {
        // Handle card navigation.
        $('#ulIssueNavigation a').click(Function.createDelegate(this, this.onCardNavigationClicked));
    },

    onCardNavigationClicked: function(event) {
        var $clicked = $(event.target);
        $clicked.blur();
        var clickedTag = $clicked.parent().attr('tag');
        if (!clickedTag) {
            return false;
        }
        this.tag = clickedTag;
        $('#ulIssueNavigation a').each(function() { $(this).attr('class', $(this).attr('class').replace('-on', '')) });
        $clicked.attr('class', $clicked.attr('class') + '-on');

        $("#divCardBrowser").fadeOut("fast", Function.createDelegate(this, this.populateCards));

        return false;
    },

    populateCards: function() {
        this.cardController.populateCards(this.tag);
    },

    browseFormatter: function(cards) {
        // Format CalloutCard JSON.  Used by AdCouncil.CalloutCardController() (AdCouncilClasses.js).
        var cImgFillerSrc = "img/filler.gif";
        var cImgFillerAlt = "";
        var cImgFillerClass = "";

        var sbTemplate = new Sys.StringBuilder();
        sbTemplate.appendLine('<div class="cards-table">');
        sbTemplate.appendLine('<table border="0" cellpadding="0" cellspacing="0">');
        sbTemplate.appendLine('<tr>');
        sbTemplate.appendLine('<td class="{card1class}"><img id="{card1videoid}" src="{card1src}" width="110" height="155" border="0" alt="{card1title}" title="{card1title}" /></td><td class="{card2class}"><img id="{card2videoid}" src="{card2src}" width="110" height="155" border="0" alt="{card2title}" title="{card2title}" /></td>');
        sbTemplate.appendLine('</tr>');
        sbTemplate.appendLine('<tr>');
        sbTemplate.appendLine('<td class="{card3class}"><img id="{card3videoid}" src="{card3src}" width="110" height="155" border="0" alt="{card3title}" title="{card3title}" /></td><td class="{card4class}"><img id="{card4videoid}" src="{card4src}" width="110" height="155" border="0" alt="{card4title}" title="{card4title}" /></td>');
        sbTemplate.appendLine('</tr>');
        sbTemplate.appendLine('</table>');
        sbTemplate.appendLine('</div>');

        var template = sbTemplate.toString();

        var sbNewHtml = new Sys.StringBuilder();
        var i = 0;
        var srcTemplate = "{card#src}";
        var titleTemplate = "{card#title}";
        var videoIDTemplate = "{card#videoid}";
        var classTemplate = "{card#class}";
        while (i < cards.length) {
            var currentTemplate = template;
            var j = 1;
            while (i < cards.length && j <= 4) {
                var currentSrcTemplate = srcTemplate.replace(/\#/, j);
                var reSrc = new RegExp(currentSrcTemplate, "g");
                currentTemplate = currentTemplate.replace(reSrc, AdCouncil.Utilities.findValueInDeserializedDict(cards[i].AssetPaths, 'Web_Browse'), "g");

                var currentTitleTemplate = titleTemplate.replace(/\#/, j);
                var reTitle = new RegExp(currentTitleTemplate, "g");
                currentTemplate = currentTemplate.replace(reTitle, cards[i].Title.replace(/"/, '&quot;'), "g");

                var currentVideoIDTemplate = videoIDTemplate.replace(/\#/, j);
                var reVideoID = new RegExp(currentVideoIDTemplate, "g");
                currentTemplate = currentTemplate.replace(reVideoID, cards[i].VideoID, "g");

                var currentClassTemplate = classTemplate.replace(/\#/, j);
                var reClass = new RegExp(currentClassTemplate, "g");
                currentTemplate = currentTemplate.replace(reClass, (cards[i].VideoID == this.videoID ? "selected" : ""), "g");

                i++;
                j++;
            }

            if (currentTemplate.indexOf("{") > -1) {
                currentTemplate = currentTemplate.replace(/{card\dsrc}/g, cImgFillerSrc);
                currentTemplate = currentTemplate.replace(/{card\dtitle}/g, cImgFillerAlt);
                currentTemplate = currentTemplate.replace(/{card\dclass}/g, cImgFillerClass);
                currentTemplate = currentTemplate.replace(/id="{card\dvideoid}"/g, "");
            }
            sbNewHtml.append(currentTemplate);
        }

        $('#divCardBrowser').html(sbNewHtml.toString());
        var images = $('#divCardBrowser img[id]');
        images.click(function(event) { if (this.id) location.href = 'CalloutCardsIndividual.aspx?VideoID=' + this.id; });
        images.css("cursor", "pointer");
        this.scrollToTop();
        $('#divCardBrowser').fadeIn("fast");

    },

    dispose: function() {
        //no-op 
    }
}

AdCouncil.IndividualCardPage.registerClass('AdCouncil.IndividualCardPage', null, Sys.IDisposable);

// Notify ScriptManager that this is the end of the script.
if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();