/*
 * Scrolling carousel, accordion, hover bubbles
 * using jQuery
 */

var msndirect = (function() {
    var _config = {
        NUM_ITEMS_TO_DISPLAY: 6,
        CONTAINER_SEL: 'div.scroller',
        LEFT_SEL: 'div.left',
        RIGHT_SEL: 'div.right',
        WINDOW_SEL: 'div.scroller-window',
        LEFT_SEL_DISABLED: 'div.leftDisabled',
        LEFT_DISABLED: 'leftDisabled',
        RIGHT_SEL_DISABLED: 'div.rightDisabled',
        RIGHT_DISABLED: 'rightDisabled',
        CONTAINER_SEL_ENABLED: 'div.scrollerEnabled',
        WINDOW_SEL_ENABLED: 'div.scroller-window-enabled'
    };


    var _isAnimating = false;
    var _scrollLis = function(fromIndex, toIndex, container) {
        var itemLeftOffset = $('li:eq(' + toIndex + ')', container).offset().left;
        var currentItemOffset = $('li:eq(' + fromIndex + ')', container).offset().left;
        var $ul = $('ul', container);
        $ul.animate({
            left: parseInt($ul.css('left')) + (currentItemOffset - itemLeftOffset)
        }, 1000, function() {
            _isAnimating = false;
        });
    };
    
    var _scrollLiswithoutAnimation = function(fromIndex, toIndex, container) {
        var itemLeftOffset = $('li:eq(' + toIndex + ')', container).offset().left;
        var currentItemOffset = $('li:eq(' + fromIndex + ')', container).offset().left;
        var $ul = $('ul', container);
        $ul.css('left', (currentItemOffset - itemLeftOffset));
    };

    var _fillupScroller = function(numberofdevices, container) {
        var $ul = $('ul', container);
        
        var blanks = '';
        
        for (var i = 0; i < numberofdevices; i++)
            blanks += '<td><li id="scrollerItem" class="item" runat="server"><div><p></p></div></li></td>';

        var tmp = $ul[0].innerHTML;
        var tagToFind = '</TR>'

        if(navigator.appName != 'Microsoft Internet Explorer')
            tagToFind = tagToFind.toLowerCase();
        
        var indx = tmp.lastIndexOf(tagToFind);
        tmp = tmp.substring(0, indx);
        tmp = tmp + blanks + '</TR></TBODY></TABLE>';
        $ul[0].innerHTML = tmp;
    };


    var _setupScrollers = function(scroller) {
        $(scroller).each(function() {
            var $this = $(this);
            var totalItems = $('li', $this).length;
            var currentPageIndex = 0;
			var currentItemIndex = 0;
            var numPages = Math.ceil(totalItems/_config.NUM_ITEMS_TO_DISPLAY);

            // add 'before-active' class to li before the active one
            $('li.active', $this).prev().addClass('before-active');
            // add first and last classes to both ends of each page
            $('li:nth-child(' + _config.NUM_ITEMS_TO_DISPLAY + 'n)', $this).addClass('last');
            $('li:nth-child(' + _config.NUM_ITEMS_TO_DISPLAY + 'n+1)', $this).addClass('first');

            if (totalItems <= _config.NUM_ITEMS_TO_DISPLAY) {
                $(_config.LEFT_SEL, $this).toggleClass(_config.LEFT_DISABLED);
                $(_config.RIGHT_SEL, $this).toggleClass(_config.RIGHT_DISABLED);
                _fillupScroller((_config.NUM_ITEMS_TO_DISPLAY - totalItems), $this);
            }
            else {
                if (currentPageIndex == 0) {
                    $(_config.LEFT_SEL, $this).toggleClass(_config.LEFT_DISABLED);
                }
            }

            // do we need to scroll?
            if (totalItems > _config.NUM_ITEMS_TO_DISPLAY) {
                // scroll to the page with the active item
                var index = $('li', $this).index($('li.active', $this));

                if (index + 1 > _config.NUM_ITEMS_TO_DISPLAY) {
                    currentPageIndex = Math.ceil((index + 1) / _config.NUM_ITEMS_TO_DISPLAY) - 1;
                    if (currentPageIndex != 0) {
                        $(_config.LEFT_SEL, $this).toggleClass(_config.LEFT_DISABLED);
                    }
					
					var scrollToItem = currentPageIndex * _config.NUM_ITEMS_TO_DISPLAY;
					if(currentPageIndex+1 == numPages) {
						scrollToItem = totalItems - _config.NUM_ITEMS_TO_DISPLAY;
					}
					
                    _scrollLiswithoutAnimation(currentItemIndex, scrollToItem, $this);
					currentItemIndex = scrollToItem;
                    if ((totalItems - (currentPageIndex) * _config.NUM_ITEMS_TO_DISPLAY) <= _config.NUM_ITEMS_TO_DISPLAY) {
                        $(_config.RIGHT_SEL, $this).toggleClass(_config.RIGHT_DISABLED);
                        //_fillupScroller(_config.NUM_ITEMS_TO_DISPLAY - ((totalItems - (currentPageIndex) * _config.NUM_ITEMS_TO_DISPLAY)), $this);
                    }
                }

                // set up click on left arrow
                $(_config.LEFT_SEL, $this).click(function() {
                    // dont do anything if we are on first page or in middle of animation
                    if (!_isAnimating && currentPageIndex > 0) {
                        _isAnimating = true;
						var scrollToItem = (currentPageIndex - 1) * _config.NUM_ITEMS_TO_DISPLAY;
                        _scrollLis(currentItemIndex, scrollToItem, $this);
						currentItemIndex = scrollToItem;
                        currentPageIndex--;
                    }
                    if (currentPageIndex == 0) {
                        $(_config.LEFT_SEL, $this).addClass(_config.LEFT_DISABLED);
                    }
					if(currentPageIndex+1 < numPages) {
                        $(_config.RIGHT_SEL, $this).removeClass(_config.RIGHT_DISABLED);
                    }
                });

                //set up click on right arrow
                $(_config.RIGHT_SEL, $this).click(function() {
                    // dont do anything if we are on last page or in middle of animation
                    if ((!_isAnimating) && ((currentPageIndex + 1) * _config.NUM_ITEMS_TO_DISPLAY < totalItems)) {
                        _isAnimating = true;
						
						var scrollToItem = (currentPageIndex+1) * _config.NUM_ITEMS_TO_DISPLAY;
						if(currentPageIndex+2 == numPages) {
							scrollToItem = totalItems - _config.NUM_ITEMS_TO_DISPLAY;
						}
						
                        _scrollLis(currentItemIndex, scrollToItem, $this);
						currentItemIndex = scrollToItem;
                        currentPageIndex++;
                        if (currentPageIndex > 0) {
                            $(_config.LEFT_SEL_DISABLED, $this).removeClass(_config.LEFT_DISABLED);
                        }
						if(currentPageIndex+1 == numPages) {
	                        $(_config.RIGHT_SEL, $this).addClass(_config.RIGHT_DISABLED);
	                    }   
                    }
                });

            }
        });
    };
    /* THIS VERSION ONLY ALLOWS ONE SECTION TO BE OPEN AT A TIME */
    /*
    var _setupAccordion = function() {
        $('ul.expandible').each(function() {
            var $this = $(this);
            $('a.expandibleLink', $this).click(function() {
                if (!$(this).blur().parent().is('.open')) {
                    $('li.open', $this).each(function() {
                        var $this = $(this);
                        //$('div.expandibleContent', $this).hide(500,function() {
                        $this.removeClass('open');
                        //});
                    });
                    $(this).parent().each(function() {
                        var $this = $(this);
                        //$('div.expandibleContent', $this).show(500, function() {
                        $this.addClass('open');
                        //});
                    });
                }
                return false;
            });
        });
    }
    */
    /* THIS VERSION ALLOWS ANY NUMBER OF SECTIONS TO BE OPENED OR CLOSED AT ONE TIME */
    var _setupAccordion = function() {
        $('ul.expandible').each(function() {
            var $this = $(this);
            $('a.expandibleLink', $this).click(function() {
                if (!$(this).blur().parent().is('.open')) {
                    $(this).parent().each(function() {
                        var $this = $(this);
                        $('div.expandibleContent', $this).slideDown(500, function() {
                            $this.addClass('open');
                        });
                    });
                } else {
                    $(this).parent().each(function() {
                        var $this = $(this);
                        $('div.expandibleContent', $this).slideUp(500, function() {
                            $this.removeClass('open');
                        });
                    });
                }
                return false;
            });
        });
        
    }

    var _setupHoverTips = function() {
        $('div.imageStrip li').hover(
			function() {
            $(this).addClass('hover');
            if ($(this).children('DIV.ServiceTooltipIncluded').children('SPAN.ServiceDeviceImageIncluded').text() != "") {
                $('div.col_405').children('img.CurrentDeviceImageIncluded').attr({ 'src': $(this).children('DIV.ServiceTooltipIncluded').children('SPAN.ServiceDeviceImageIncluded').text() });
            }
        },
			function() {
            $(this).removeClass('hover');
            $('div.col_405').children('img.CurrentDeviceImageIncluded').attr({ 'src': $('div.col_405').children('SPAN.ServiceDeviceImageIncluded').text() });
        }
		);
        $('span.hover-tip').wrap('<div class="hover-tip"><span class="l"><span class="r"></span></span><div class="tail"></div></div>');
        
        $('div.imageStripEnabled li').hover(
			function() {
            $(this).addClass('hover');
            if ($(this).children('DIV.ServiceTooltipEnabled').children('SPAN.ServiceDeviceImageEnabled').text() != "") {
                $('div.col_405').children('img.CurrentDeviceImageEnabled').attr({ 'src': $(this).children('DIV.ServiceTooltipEnabled').children('SPAN.ServiceDeviceImageEnabled').text() });
            }
        },
			function() {
            $(this).removeClass('hover');
            $('div.col_405').children('img.CurrentDeviceImageEnabled').attr({ 'src': $('div.col_405').children('SPAN.ServiceDeviceImageEnabled').text() });
        }
		);
        $('span.hover-tip-enabled').wrap('<div class="hover-tip-enabled"><span class="l"><span class="r"></span></span><div class="tail"></div></div>');
    }

    return {
        init: function() {
            _setupScrollers(_config.CONTAINER_SEL);
            _setupScrollers(_config.CONTAINER_SEL_ENABLED);
            $('div.scroller-window').hide().show();
            $('div.scroller-window-enabled').hide().show();
            _setupAccordion();
            _setupHoverTips();
        }
    }
})();



$(document).ready(msndirect.init);