var $rotatorJQuery = jQuery.noConflict(true),
	slideDuration = 6000,
	slideAnimationSpeed = 900,	
	insetRightAnimationSpeed = 1500,
	insetLeftAnimationSpeed = insetRightAnimationSpeed,
	thumbOpacityInSpeed = 1500,
	thumbOpacityOutSpeed = 1000,
	insetAfterTimeoutObject;

$rotatorJQuery(document).ready(function ($) {
    var $slideThumbs = $rotatorJQuery('.navigationButtons.selectable')
                , $rotator = $rotatorJQuery('#homepageRotator')
                , setBackgroundPosition;

    $rotator.find('li').each(function () {
        $this = $rotatorJQuery(this);
        $this.find('.colorOverlay').addClass($this.attr('colortheme'));
        $this.find('.grid').addClass($this.attr('colortheme'));
    });

    $rotator.cycle({
        fx: 'fade',
        speed: slideAnimationSpeed,
        next: '#nextHomepageRotatorSlide',
        prev: '#prevHomepageRotatorSlide',
        fastOnEvent: slideAnimationSpeed,
        timeout: slideDuration,
		delay: -1000,
        before: function (curr, next, opts) {
            var $nextText = $rotatorJQuery(next).find('.text, .colorOverlay');
			
            $nextText.css('left', $nextText.css('width').replace(/[^-\d\.]/g, '') * -1);

            $slideThumbs.filter('[slide="' + opts.currSlide + '"]').fadeTo(thumbOpacityOutSpeed, 0.6);
        },
        after: function (curr, next, opts) {
            $currText = $rotatorJQuery(next).find('.text, .colorOverlay');

            insetAfterTimeoutObject = setTimeout(function () {
                $currText.animate({ left: $currText.css('width').replace(/[^-\d\.]/g, '') * -1 }, insetLeftAnimationSpeed);
            }, slideDuration - 1000);

            $currText.animate({ left: 0 }, insetRightAnimationSpeed);
            $slideThumbs.filter('[slide="' + opts.currSlide + '"]').animate({ opacity: 1.0 }, thumbOpacityInSpeed);
        }
    });

    $slideThumbs.mouseover(function () {
        var $this = $rotatorJQuery(this);
        $this.css('top', $this.css('top') - 4);
        $this.css('left', $this.css('left') - 4);
        $this.css('backgroundPosition', '-4px -4px');

        $hoverText = $rotatorJQuery("<div class='hoverText'><div class='" + $this.attr('colortheme') + "'>" + $this.attr('hoverText') + "</div></div>").appendTo('#hoverTextContainer');

        $hoverText.css('bottom', $this.css('top').replace(/[^-\d\.]/g, '') * -1);
        $hoverText.css('left', $this.css('left').replace(/[^-\d\.]/g, '') - $hoverText.width() + 20);

        setBackgroundPosition($hoverText, $this.attr('colortheme'));
        $hoverText.slideDown();
        $this.mouseout(function () {
            $hoverText.slideUp(function () {
                $rotatorJQuery(this).remove();
            });
        })
    });

    $slideThumbs.mouseout(function () {
        var $this = $rotatorJQuery(this);
        $this.css('top', $this.css('top') + 4);
        $this.css('left', $this.css('left') + 4);
        $this.css('backgroundPosition', '0 0');
    });

    $slideThumbs.click(function () {
		clearTimeout(insetAfterTimeoutObject);
        $rotator.cycle(Math.floor($rotatorJQuery(this).attr('slide')));
    });
	
	$rotatorJQuery('#nextHomepageRotatorSlide, #prevHomepageRotatorSlide').click(function() {
		clearTimeout(insetAfterTimeoutObject);
	});

    setBackgroundPosition = function ($target, colortheme) {
        var backgroundPosition;

        switch (colortheme) {
            case 'restaurant':
                backgroundPosition = "right 5px";
                break;
            case 'retail':
                backgroundPosition = "right -39px";
                break;
            case 'hotel':
                backgroundPosition = "right -17px";
                break;
            case 'general':
                backgroundPosition = "right 27px";
                break;
        }

        $target.css('backgroundPosition', backgroundPosition);
    };

    $slideThumbs.each(function (index, element) {
        var $element = $rotatorJQuery(element);
        $element.addClass($element.attr('colortheme'));
    });

});