/*  multipurpose carousel - can choose transition type (fade, scroll horizontal or vertical, swap content instantaniously)
Can choose to auto rotate and time between transitions.
*/

(function ($) {
    $.fn.contentGallery = function (options) {
        var options = jQuery.extend(
         {
             index: 0
             , type: 'fade'  // 'fade', 'horiz', 'vert', 'swap'
             , auto: false
             , delay: 2500
             , nav: false  //  nav not 
             , speed: 500
             , nextPrev: true
             , loadRandom: false
             , continueous: true
         }, options || {});

        return this.each(function () {
            var $this = $(this);
            var $thisChildren = $this.find('.contentBox');
            var thisWidth = $this.outerWidth(true);
            var thisHeight = $this.outerHeight(true);
            var clickable = true;
            var marqIndex = 0;
            var marqLength = $('.contentBox', this).size();
            var curMarq;
            var nextMarq;
            var curInt = 0;
            var nextMarqIndex = curInt++;
            var rolloverTimer,
                previewImg,
                previewImgOff,
                ctrlbtnPrev,
                ctrlbtnNext;
            var previewImgOn = -1;
            var contNext = false;
            var goNext = true;
            $this.css('overflow', 'hidden');
            if (options.loadRandom) {
                curMarq = $thisChildren.eq(marqIndex);
                marqIndex = Math.floor(Math.random() * marqLength)
                nextMarq = $thisChildren.eq(marqIndex);
                curMarq.css({ 'display': 'none' });
                nextMarq.css({ 'display': 'block' });
            }
            if (options.auto) {
                var scrollInt = setInterval(function () { next(nextMarqIndex) }, options.delay);
                $(this).hover(function () {
                    clearInterval(scrollInt);
                }, function () {
                    if (options.auto) scrollInt = window.setInterval(function () { next(nextMarqIndex) }, options.delay);
                });
            }

            //Bind preview to unset timeout
            $('.cntrlBtnPreview').bind("hover", function () {
                clearTimeout(rollOverTimer);
            });

            //append Next/Previous controls to element
            if (options.nextPrev) {
                $this.wrap('<div style="position: relative;">');
                $this.parent().append('<div class="cntrBtnWrap left"><div class="lyrRel"><div class="cntrlBtnPreview"></div><a class="cntrlBtn prev" href="#prev"><div>&nbsp;</div></a></div></div><div class="cntrBtnWrap right"><div class="lyrRel"><div class="cntrlBtnPreview"></div><a class="cntrlBtn next" href="#next"><div>&nbsp;</div></a></div></div>');
                ctrlbtnPrev = $('.cntrlBtn').eq(0);
                ctrlbtnNext = $('.cntrlBtn').eq(1);
                ctrlbtnPrev.hover(function (e) {
                    if (e.type == 'mouseenter') {
                        showPrevImg($(this), 0);
                    }
                    else {
                        hidePrevImg($(this), previewImg, 0);
                        previewImgOn = -1;
                    }
                });
                ctrlbtnNext.hover(function (e) {
                    if (e.type == 'mouseenter') {
                        showPrevImg($(this), 1);
                    }
                    else {
                        hidePrevImg($(this), previewImg, 1);
                        previewImgOn = -1;
                    }
                });
            }

            if (options.nav) {
                $this.append('<div class="ctrls"></div>');
                $thisChildren.each(function () {
                    $thisLink = $thisChildren.index($(this)) + 1;
                    //$this.find('.ctrls').append('<a href="#' + $thisLink + '">' + $thisLink + '</a>');
                    //updated to use rel tag because of ie7 issue with text-indent
                    $this.find('.ctrls').append('<a href="#' + $thisLink + '" rel="' + $thisLink + '">&nbsp;</a>');
                });
                $('.ctrls a:first').addClass('on');
                $('.ctrls a').click(function () {
                    //if (!$(this).hasClass('on') && clickable) marqRot($(this).text());
                    if (!$(this).hasClass('on') && clickable) marqRot($(this).attr("rel"));
                    return false;
                });
            };
            function getPrevImgHTML(idx) {
                //Get Preview Image HTML
                var realidx = marqIndex + 1;
                previewImg = (idx == 0 ? ctrlbtnPrev : ctrlbtnNext).parent().children(".cntrlBtnPreview");
                previewImgOff = (idx == 0 ? ctrlbtnNext : ctrlbtnPrev).parent().children(".cntrlBtnPreview");
                previewImg.hide();
                var thumbidx = (idx == 1 ? (realidx >= marqLength ? 1 : realidx + 1) : (realidx <= 1 ? marqLength : realidx - 1));
                var previewHTMLSrc = $("#mainCarousal .contentBox").eq(thumbidx - 1).find(".thumbnail").text();
                var previewHTML = '<div class="cntrlBtnPreviewImg"><img src="' + previewHTMLSrc + '" width="162" border="0" alt="" /></div>';
                return previewHTML;
            };
            function showPrevImg(obj, idx) {
                previewImgOn = idx;
                //Set the html to the preveiw div
                previewHTML = getPrevImgHTML(idx);
                previewImg.html(previewHTML);
                //Fade in the preview
                previewImg.fadeIn(function () {
                    // checking if we need to hide the other image
                    if (previewImgOff.html() != "")
                        hidePrevImg((idx == 0 ? ctrlbtnNext : ctrlbtnPrev), previewImgOff, (idx == 0 ? 1 : 0));
                });
                //Allow for the link to be larger and clickable
                obj.css("width", "229px");
            };
            function hidePrevImg(objBtn, objImg, idx) {
                //Remove preview after 0.2s
                rollOverTimer = setTimeout(function () { objImg.fadeOut(); objImg.html(''); }, 200);
                //Shrink the link back to normal size.
                objBtn.css("width", "29px");
            };
            function rotPrevImg(idx) {
                var obj = (idx == 0 ? ctrlbtnPrev : ctrlbtnNext);
                showPrevImg(obj, idx);
            };
            function marqRot(index) {
                clickable = false;
                curMarq = $thisChildren.eq(marqIndex);
                curInt = marqIndex;
                marqIndex = index - 1;
                if (marqIndex >= marqLength) { marqIndex = 0; }
                else if (marqIndex < 0) { marqIndex = marqLength - 1; }
                nextMarq = $thisChildren.eq(marqIndex);
                nextMarqIndex = marqIndex;
                if (options.nav) highlightNav();

                switch (options.type) {
                    //  Fade in and out       
                    case 'fade':
                        curMarq.css({ 'z-index': 2 }).fadeOut(options.speed, function () { clickable = true; });
                        nextMarq.css({ 'z-index': 1, 'display': 'block' });
                        break;

                    // Scroll horizontal      
                    case 'horiz':
                        if (curInt < nextMarqIndex && goNext == true || contNext == true) {
                            curMarq.css({ 'left': 0 });
                            nextMarq.css({ 'display': 'block', 'left': thisWidth + 'px' });
                            curMarq.animate({ 'left': -thisWidth + 'px' }, options.speed);
                            nextMarq.animate({ 'left': 0 + 'px' }, options.speed, function () {
                                clickable = true;
                                if (previewImgOn > -1) {
                                    rotPrevImg(previewImgOn);
                                }
                            });
                        } else {
                            curMarq.css({ 'left': 0 });
                            nextMarq.css({ 'display': 'block', 'left': -thisWidth + 'px' });
                            curMarq.animate({ 'left': thisWidth + 'px' }, options.speed);
                            nextMarq.animate({ 'left': 0 + 'px' }, options.speed, function () {
                                clickable = true;
                                if (previewImgOn > -1) {
                                    rotPrevImg(previewImgOn);
                                }
                            });
                        }
                        break;

                    // Scroll vertical      
                    case 'vert':
                        if (curInt < nextMarqIndex && goNext == true || contNext == true) {
                            curMarq.css({ 'top': 0 });
                            nextMarq.css({ 'display': 'block', 'top': thisHeight + 'px' });
                            curMarq.animate({ 'top': -thisHeight + 'px' }, options.speed);
                            nextMarq.animate({ 'top': 0 + 'px' }, options.speed, function () { clickable = true; });
                        } else {
                            curMarq.css({ 'top': 0 });
                            nextMarq.css({ 'display': 'block', 'top': -thisHeight + 'px' });
                            curMarq.animate({ 'top': thisHeight + 'px' }, options.speed);
                            nextMarq.animate({ 'top': 0 + 'px' }, options.speed, function () { clickable = true; });
                        }
                        break;

                    // Direct switch, no animation      
                    case 'swap':
                        curMarq.css({ 'display': 'none' });
                        nextMarq.css({ 'display': 'block' });
                        clickable = true;
                        break;
                }
            };
            function next(nextMarqIndex) {
                nextMarqIndex = nextMarqIndex + 2;
                marqRot(nextMarqIndex);
            };
            //  Next Previous Buttons
            $('.next', $this.parent()).click(function () {
                if (clickable) {
                    if (options.continueous) { contNext = true; }
                    goNext = true;
                    next(nextMarqIndex);
                }
                return false;
            });
            $('.prev', $this.parent()).click(function () {
                if (clickable) {
                    contNext = false;
                    goNext = false;
                    marqRot(nextMarqIndex);
                }
                return false;
            });

            function highlightNav() {
                $('.ctrls a').removeClass('on');
                $('.ctrls a').eq(marqIndex).addClass('on');
            };
        });
    };
})(jQuery);