$(document).ready(function () {

    $(window).resize(function () {
        onResize(true);
    });
    onResize(false);

    //Randomize tile elements
    $("#lookbookgrid").randomize(".tile");

    $(".desktop-device #main").isotope({
        // options
        itemSelector: '.tile',
        layoutMode: 'fitRows'
    });

    $(".mobile-device #main").isotope({
        // options
        itemSelector: '.tile',
        layoutMode: 'fitRows',
        animationEngine: 'jquery'
    });

    $(".desktop-device .tile:not(.texttile)").hover(function () {
        $(this).find(".viewbar").toggle();
    });

    function EventTrack(config) {
        if (_gaq && _gaq.push && config) {
            var eventCategory = config[0].config.brandName + ' Tile';
            var eventAction = 'Clicked';
            var eventLabel = window.location.host + config[0].config.largeImageUrl;
            _gaq.push(['_trackEvent', eventCategory, eventAction, eventLabel]);
        }
    }

    // Show Popout	
    $(".desktop-device .viewbar").click(function () {
        var tile = $(this.parentNode);

        var config = JSON.parse(tile.data("meta"));
        EventTrack(config);
        window.location.hash = "tileid=" + config[0].config.tileId;
    })

    // Show Popout - mobile
    $(".mobile-device .tile").click(function () {
        var tile = $(this);
        var config = JSON.parse(tile.data("meta"));
        EventTrack(config);
        window.location.hash = "tileid=" + config[0].config.tileId;
    })

    // On navigation
    $(window).bind('hashchange', function (e) {
        var tileId = getParameterByName("tileid");
        var popoutTemplate = '';

        if (tileId && tileId.length > 0) {
            var theTile = document.getElementById('tile' + tileId);
            if (theTile) {
                var scriptData = $(theTile).data("meta");
                if (scriptData && scriptData.length >= 1) {
                    var config = JSON.parse(scriptData);

                    if (popoutTemplate) {
                        applyPopoutTemplate(popoutTemplate);
                    }
                    else {
                        $.get('/Custom/Ui/Companys/templates/lookbooktilepopout.tmpl.txt', function (template) {
                            popoutTemplate = template;
                            applyPopoutTemplate(popoutTemplate);
                        });
                    }

                    function applyPopoutTemplate(template) {
                        var templateData = $.tmpl(template, config);

                        $.fancybox(
		                templateData.html(),
		                {
		                    'overlayColor': '#000',
		                    'autoDimensions': false,
		                    'padding': 0,
		                    'margin': 0,
		                    'width': 327,
		                    'height': 631,
		                    'scrolling': 'no',
		                    'transitionIn': 'none',
		                    'transitionOut': 'none',
		                    'showCloseButton': false,
		                    'onClosed': function () { RemoveKeyFromUrl('tileid'); }
		                }
                    );

                        FB.XFBML.parse();
                    }
                }
            }
        }
    });

    $(window).trigger('hashchange');

    // Hide popout
    $("body").delegate(".tile-popout-close", "click", function () {
        RemoveKeyFromUrl('tileid');
        $.fancybox.close();
        return false; // prevent tile re-opening
    });

    // Fill news streamer
    FillNewsStreamer();

    // Animate news streamer
    animateNewsStreamer();
});

function FillNewsStreamer() {
    $('#news-streamer-wrapper').each(function (index) {
        this.data = JSON.parse($(this).find('script.config')[0].innerHTML)[0];
        var list = $(this).find('.news-stream-list');
        var showItems = parseInt(this.data.config.newsitems);

        // Calculate streamer colors
        var backAlpha = 0.8;
        var backRGB = convertColorStringToRGBString(this.data.config.backcolor);
        var textRGB = convertColorStringToRGBString(this.data.config.textcolor);
        var textHoverRGB = convertColorStringToRGBString(this.data.config.texthovercolor);

        // Fill Rss content
        $.ajax({
            url: this.data.config.rssfeed,
            success: function (resp) {
                $.get('/Custom/Ui/Companys/templates/newsstreamer.tmpl.txt', function (template) {
                    var allItems = $(resp).find('item');
                    var listLength = (allItems.length < showItems) ? allItems.length : showItems;

                    var l = {};
                    l.listItems = new Array();
                    var listCount;
                    for (listCount = 0; listCount < listLength; listCount++) {
                        l.listItems[listCount] = {};
                        l.listItems[listCount].Url = $(allItems[listCount]).find('link').text();
                        l.listItems[listCount].Title = $(allItems[listCount]).find('title').text();
                        l.listItems[listCount].Description = $(allItems[listCount]).find('description').text();
                    }

                    $.tmpl(template, l).appendTo(list);

                    // Resize streamer
                    var streamerItems = $('#campaign-news-streamer').find('.news-streamer-item');
                    if (streamerItems) {
                        if (streamerItems.length > 0) {
                            // Add one to ensure streamer animation stays within boundary
                            var streamerWidth = (streamerItems.length + 1) * streamerItems.width();
                            $("#campaign-news-streamer").width(streamerWidth);
                        }
                    }

                    $("#campaign-news-streamer").find('ul').css('background', backRGB).css('opacity', backAlpha);
                    $(".news-streamer-item a").css('color', textRGB);
                    $(".news-streamer-item a").hover(function () {
                        $(this).css('color', textHoverRGB);
                    },
                    function () {
                        $(this).css('color', textRGB);
                    });
                });
            }
        });
    });
}

// Examples:
// 'FF8888' => 'rgb(255, 136, 136)'
// 'F88'    => 'rgb(255, 136, 136)'
function convertColorStringToRGBString(colorString) {
    var R = 0;
    var G = 0;
    var B = 0;
    if (colorString.length === 6) {
        R = parseInt(colorString.substring(0, 2), 16);
        G = parseInt(colorString.substring(2, 4), 16);
        B = parseInt(colorString.substring(4, 6), 16);
    }
    else if (colorString.length === 3) {
        R = parseInt(colorString.substring(0, 1) + colorString.substring(0, 1), 16);
        G = parseInt(colorString.substring(1, 2) + colorString.substring(1, 2), 16);
        B = parseInt(colorString.substring(2, 3) + colorString.substring(2, 3), 16);
    }
    var RGB = 'rgb(' + R + ', ' + G + ', ' + B + ')';
    return RGB;
}

var newsStreamerPause = 0;
var newsStreamerAnimateTime = 4000;
var newsStreamerIsPaused = false;


function animateNewsStreamer() {
    var newsStreamList = document.getElementById('news-stream-list');
    var $newsStreamList = $(newsStreamList);    
    window.setTimeout(stepNewsStreamer, newsStreamerPause);

    // "jquery.pause" on mouseover on desktop devices
    $(".desktop-device #news-stream-list").hover(function () {
        $newsStreamList.pause();
        newsStreamerIsPaused = true;
    }, function () {
        $newsStreamList.resume();
        newsStreamerIsPaused = false;
    });

    function stepNewsStreamer() {
        if (newsStreamerIsPaused) {
            window.setTimeout(stepNewsStreamer, newsStreamerPause);
            return;
        }

        $newsStreamList.animate({
            left: '-246px'
        }, newsStreamerAnimateTime, 'linear', function () {
            newsStreamList.appendChild(newsStreamList.children[0]);
            newsStreamList.style.left = '0px';
            window.setTimeout(stepNewsStreamer, newsStreamerPause);
        });
    }

}


(function ($) {

    $.fn.randomize = function (childElement) {
        return this.each(function () {
            var $this = $(this);
            var children = $this.children(childElement);
            var elems = children.clone();

            elems.sort(function () { return (Math.round(Math.random()) - 0.5); });

            for (var i = 0; i < elems.length; i++)
                children.eq(i).replaceWith(elems[i]);
        });
    };

})(jQuery);

function onResize(removePopup) {
	var itemWidth = 82;
	var itemHeight = 133;

	var pageWidth = $(window).width();
	var columns = Math.floor(pageWidth / itemWidth);

	if (columns <= 12) { columns = 12; }
	else if (columns >= 20) { columns = 20; }

	var mainWidth = itemWidth * columns;

	$("#wrapper").width(mainWidth);

	var itemsPerRow = Math.floor(mainWidth / itemWidth);
	var items = $(".tile").get();
	var itemRows = Math.floor(items.length / itemsPerRow);
	var newHeight = itemHeight * itemRows;

	$("#page").height(newHeight);
}

function getTileFbHref(tileId) {
    var baseurl = window.location.host + window.location.pathname;

    return escape(baseurl + $.urlsafebase64.encode('?tilemeta=' + tileId + '#tileid=' + tileId)) + '.qh64';
}