var widgetAssetOverview = {
    init: function () {
        $(".assetoverview").each(function () {
            $(this).append('<div class="temp"></div>');
            var itemsContainer = $(this).find('.temp');
            var items = $(this).find('.items > *');
            var itemsNum = items.length;

            var row = parseInt($(this).attr("row"));
            var col = parseInt($(this).attr("col"));
            //avoid page crash if col eq 0 as numerator, it'll throw exception.
            if (col == 0 || row == 0) {
                $(this).parent().hide(); //hide as-item element
                return;
            }
            var itemsNumPerPage = row * col;

            var pageNum;
            if ((itemsNum / itemsNumPerPage).toString().indexOf('.') >= 0) {
                pageNum = Math.floor(itemsNum / itemsNumPerPage) + 1;
            } else {
                pageNum = itemsNum / itemsNumPerPage;
            }

            for (var i = 0; i < pageNum; i++) {
                itemsContainer.append('<div class="page"></div>');
                var startIndex = i * itemsNumPerPage;
                var endIndex = (i + 1) * itemsNumPerPage;
                items.slice(startIndex, endIndex).clone().appendTo(itemsContainer.find('.page').eq(i));
            }

            itemsContainer.find('.page').each(function () {
                for (var i = 0; i < row; i++) {
                    var startIndex = 0;
                    var endIndex = col;
                    $(this).children('[class != "row"]').slice(startIndex, endIndex).wrapAll('<div class="row"/>');
                }
            });

            $(this).children('.items').remove();
            itemsContainer.removeClass('temp').addClass('items');


            var item = itemsContainer.find('.assetoverview-item img')[0];

            if (item != null) {
                var itemwidth = GetElementWidth(item);
                var itemheight = GetElementHeight(item);

                $(this).width(itemwidth * col + "px");
                $(this).height(itemheight * row + "px");
            }

            for (var i = 0; i < pageNum; i++) {
                $(this).siblings(".scrollablePagination").append('<a href="#">' + parseInt(i + 1) + '</a> ');
            }

            $(this).siblings(".scrollablePagination").find('a').click(function () {
                var api = $(this).closest('.scrollablePagination').siblings('.assetoverview').data("scrollable");
                var pageIndex = parseInt($(this).html()) - 1;
                api.seekTo(pageIndex, 400);
                $(this).closest('.scrollablePagination').find('a').removeClass("active");
                $(this).addClass("active");

                return false;
            });
            $(this).scrollable(widgetAssetOverview.options);

            //fancybox
            $('.fancybox', this).fancybox(
                widgetAssetOverview.fancyBoxOptions
            ); //fancybox() end

            widgetAssetOverview.showAsset();
        });
    }, // init() end
    showAsset: function () {
        var assetID = location.search.match(/show=[^&$]*/);
        if (typeof (assetID) != 'undefined' && assetID != null) {
            var $asset = $('#' + assetID[0].split(/=|&/)[1])
            if ($asset[0]) {
                //paginage
                var pageIndex = $asset.closest('.page').index();
                widgetAssetOverview.paginate($asset.closest('.assetoverview'), pageIndex);

                //display asset in fancybox
                $asset.closest('.assetoverview-item').children('a').click();
            }
        }
    }, //showAsset() end
    paginate: function (assetOverviewDiv, pageIndex) {
        var api = $(assetOverviewDiv).data("scrollable");
        api.seekTo(pageIndex, 400);
    }, //paginate() end

    fancyBoxOptions: {
        beforeClose: function () {
            var videoLink = $(".fancybox-inner .video a");
            if (videoLink.length > 0) {
                videoLink.flowplayer().each(function () {
                    this.stop();
                    this.unload();
                });
            }
        },
        beforeLoad: function () {
            var videoLink = $(".fancybox-inner .video a");
            if (videoLink.length > 0) {
                videoLink.flowplayer().each(function () {
                    this.stop();
                    this.unload();
                });
            }
            $('iframe').each(function () {
                var url = $(this).attr("src");
                if (url != null && url.toLowerCase().indexOf("wmode=transparent") == -1) {
                    if (url.indexOf("?") == -1) {
                        $(this).attr("src", url + "?wmode=transparent");
                    }
                    else {
                        $(this).attr("src", url + "&wmode=transparent");
                    }
                }
            });
        }
    },

    options: {

    }
}

//$(this).on('load.assetoverview', widgetAssetOverview.init);

function GetElementWidth(element) {

    var width = parseInt($(element).width());
    var rightmargin = parseInt($(element).css("marginRight").replace('px', ''));
    var leftmargin = parseInt($(element).css("marginLeft").replace('px', ''));
    var rightpadding = parseInt($(element).css("paddingRight").replace('px', ''));
    var leftpadding = parseInt($(element).css("paddingLeft").replace('px', ''));

    return width + rightmargin + leftmargin + rightpadding + leftpadding + 2;

}

function GetElementHeight(element) {

    var height = parseInt($(element).height());
    var topmargin = parseInt($(element).css("marginTop").replace('px', ''));
    var bottommargin = parseInt($(element).css("marginBottom").replace('px', ''));
    var toppadding = parseInt($(element).css("paddingTop").replace('px', ''));
    var bottompadding = parseInt($(element).css("paddingBottom").replace('px', ''));

    return height + topmargin + bottommargin + bottompadding + toppadding;

}