﻿/*----------- Category Rotator ----------*/

var _itemWidth = 130;
var _itemsInRow = 5;
var _moving = false;
var _pageSize = 5;
var _step = 5;
var _items = [];
var _loadCompleted = false;

function initializeRotator(_cats) {
    _items = _cats;
    loadCategoryDisplay($('#category-rotator'));
    $('#rotator-left').click(function () { moveLeft($('#category-rotator>table')); });
    $('#rotator-right').click(function () { moveRight($('#category-rotator>table')); });
};

function showLeftRight(sender) {
    $(sender).parent().prev().css('visibility', 'visible');
    $(sender).parent().next().css('visibility', 'visible');
    _moving = false;
};

function moveLeft(sender) {
    if (_moving == false) {
        _moving = true;
        if (typeof (sender != 'undefined' && sender.length > 0)) {
            if (_loadCompleted == false) loadAll();
            var _pos = Math.abs(parseInt($(sender).css('left')) / _itemWidth);
            var _maxPos = _items.length - _itemsInRow;
            if (_pos > 0) {
                _pos -= _step;
                if (_pos < 0) _pos = 0;
                setPager(_pos);
                var offset = -(_pos * _itemWidth);
                $(sender).animate({ left: offset }, 100, function () { showLeftRight(sender); });
            }
            else {
                _pos = _maxPos;
                setPager(_pos);
                var offset = -(_pos * _itemWidth);
                $(sender).animate({ left: offset }, 100, function () { showLeftRight(sender); });
            }
        }
        else showLeftRight(sender);
    }
};

function moveRight(sender) {
    if (_moving == false) {
        _moving = true;
        if (typeof (sender != 'undefined') && sender.length > 0) {
            if (_loadCompleted == false) loadAll();
            var _pos = Math.abs(parseInt($(sender).css('left')) / _itemWidth);
            var _maxPos = _items.length - _itemsInRow;
            if (_pos < _maxPos) {
                _pos += _step;
                if (_pos > _maxPos) _pos = _maxPos;
                setPager(_pos);
                var offset = -(_pos * _itemWidth);
                $(sender).animate({ left: offset }, 100, function () { showLeftRight(sender); });
            }
            else {
                _pos = 0;
                setPager(_pos);
                var offset = -(_pos * _itemWidth);
                $(sender).animate({ left: offset }, 100, function () { showLeftRight(sender); });
            }
        }
        else _showLeftRight(sender);
    }
};

function setPager(_pos) {
    $('#category-rotator a.pager').removeClass('active');
    var _page = Math.floor(_pos / _step);
    if (_page * _step < _pos) _page += 1;
    $('#category-rotator a.pager[page=' + _page + ']').addClass('active');
};

function loadAll() {
    $('#category-rotator .grid-item>a').each(function () {
        if ($(this).html() == '') {
            var _index = $(this).attr('id').replace('cat_', '');
            $(this).append($('<img alt="' + _items[_index].Alt + '" src="' + _items[_index].ImageUrl + '" />'));
            $(this).append('<span>' + _items[_index].Alt + '</span>');
        }
    });
    _loadCompleted = true;
};

function loadPage(_pos) {
    if (_loadCompleted == false) loadAll();
    var offset = -(_pos * _itemWidth);
    $('#category-rotator .productgrid').animate({ left: offset }, 100, function () { showLeftRight('#category-rotator .productgrid'); });
};

function loadPager(_wrapper) {
    var _pageCount = Math.floor(_items.length / _step);
    if (_items.length - (_step * _pageCount) > 0) _pageCount += 1;
    var p = $('<div></div>').css('position', 'relative').css('left', '50%').css('margin-left', '-' + (_pageCount * 22) / 2 + 'px');
    for (var i = 0; i < _pageCount; i++) {
        var _pos = i * _step;
        var _maxPos = _items.length - _itemsInRow;
        if (_pos > _maxPos) _pos = _maxPos;
        var a = $('<a></a>').addClass('pager').attr('id', 'pager_' + i).attr('pos', _pos).attr('page', i).click(function () { $('#category-rotator a.pager').removeClass('active'); $(this).addClass('active'); loadPage($(this).attr('pos')); });
        if (i == 0) {
            a.addClass('active');
        }
        p.append(a);
    }
    _wrapper.append($('<div></div>').addClass('pager-wrapper').append(p));
};

function loadCategoryDisplay(_wrapper) {
    if (_items != null) {
        $(_wrapper).html('');
        var t = $('<table></table>').attr('cellpadding', '0').attr('cellspacing', '0').attr('border', '0').addClass('productgrid').width(_itemWidth * _items.length).css('left', '0px');
        var r = $('<tr></tr>');
        for (var i = 0; i < _items.length; i++) {
            var a = $('<a />').attr('id', 'cat_' + i).attr('title', _items[i].Alt).attr('href', _items[i].Url);
            if (i < _pageSize + _step || i >= _items.length - _step) {
                a.append($('<img alt="' + _items[i].Alt + '" src="' + _items[i].ImageUrl + '" />'));
                a.append('<span>' + _items[i].Alt + '</span>');
        }
        r.append($('<td></td>').addClass('grid-item').append(a).mouseover(function () { $(this).addClass('hover'); }).mouseout(function () { $(this).removeClass('hover'); }));
        }
        $(t).append($(r));
        $(_wrapper).append($(t));
        loadPager(_wrapper);
    }
    showLeftRight($(t));
};


