$jq.namespace('MatchCore.carousel');

$jq(document).ready(function() {
	var maxLength = ( $jq(".sptlghtMale").length <= $jq(".sptlghtFemale").length )?$jq(".sptlghtMale").length:$jq(".sptlghtFemale").length;
	
	for (var i = 0; i < maxLength; i++) {
		$jq(".startspotlight").append( $jq(".sptlghtMale").get(i) );
		$jq(".startspotlight").append( $jq(".sptlghtFemale").get(i) );
	}

    MatchCore.carousel.spotlightmycarousel.init();
    MatchCore.carousel.matchcarousel.init();
});
    
MatchCore.carousel.matchcarousel = function(){
    return{
        init:function(){
            MatchCore.carousel.matchcarousel.nextimage(null, 4);
        },
        nextimage: function(carousel, index){
            $jq('.jcarousel-centerfloat').empty();
            MatchCore.carousel.matchcarousel.showimage(carousel, index);

            $jq('.jcarousel-centerfloat img').addClass('jcarousel-newsize');
        },
        showimage: function(carousel, index){
            var list = MatchCore.carousel.spotlightmycarousel.CarouselItemList();
            var idx = index;
            if (carousel != null)
                idx = carousel.index(index, list.length);
            if (list.length >= idx)
            {
                var item = list[idx - 1];

                $jq('.spot_carousel').each(function() {
                    var view = this;
                    $jq('.jcarousel-image-Large', this).each(function() {
                        if($jq(this).attr('alt') == item.title){
                            $jq(view).clone().prependTo('.jcarousel-centerfloat');
                        }
                    });
                });
            }
        }
    }
}(); 

MatchCore.carousel.spotlightmycarousel = function(){
    var getList = function(){
        var slist = [];
        $jq('.spot_carousel').each(function() {
            $jq('.jcarousel-image', this).each(function() {
                mycarousel_itemList.push({url: $jq(this).attr('src'), title: $jq(this).attr('alt'), city: $jq(this).attr('city')});
            });
        });
    }
    var lastIdx = 4;
    var mycarousel_itemList = [];
    
    var mycarousel_itemVisibleInCallback = function(carousel, item, i, state, evt)
    {
        // The index() method calculates the index from a
        // given index who is out of the actual item range.
        var idx = carousel.index(i, mycarousel_itemList.length);
        carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[idx - 1]));
        
        $jq('#mycarousel li').bind('click', function() {
            var index = ($jq(this).attr('jcarouselindex')) *1;
            carousel.scroll($jq.jcarousel.intval(index - 3));
            MatchCore.carousel.matchcarousel.nextimage(carousel, index);
            lastIdx = index;
            return false;
        });
    };

    var mycarousel_itemVisibleOutCallback = function(carousel, item, i, state, evt)
    {
        carousel.remove(i);
        
        $jq('#mycarousel li').bind('click', function() {
            var index = ($jq(this).attr('jcarouselindex')) *1;
            carousel.scroll($jq.jcarousel.intval(index - 3));
            MatchCore.carousel.matchcarousel.nextimage(carousel, index);
            lastIdx = index;
            return false;
        });
    };
    var mycarousel_initCallback = function(carousel)
    {
        $jq('#mycarousel li').bind('click', function() {
            var index = ($jq(this).attr('jcarouselindex')) *1;
            carousel.scroll($jq.jcarousel.intval(index - 4));
            return false;
        });
        
        $jq('.jcarousel-next').bind('click', function(){
            carousel.next();
            lastIdx++;
            MatchCore.carousel.matchcarousel.nextimage(carousel, lastIdx);
            return false;
        });
        
        $jq('.jcarousel-prev').bind('click', function(){
            carousel.prev();
            lastIdx--;
            MatchCore.carousel.matchcarousel.nextimage(carousel, lastIdx);
            return false;
        });
    };

    /**
     * Item html creation helper.
     */
    var mycarousel_getItemHTML = function(item) {
		 var strHTML = "";	
		 
		if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) { 		
			var ieversion=new Number(RegExp.$1)
			if ( parseFloat(ieversion) <= 6 ) {
				strHTML = '<img class="imgBorder" src="http://cp.match.com/en-ca/msn/index/images/10157_ActionIndex_brdrSptLight.gif" width="104" height="104" />';
			} else {
				strHTML = '<img class="imgBorder" src="http://cp.match.com/en-ca/msn/index/images/10157_ActionIndex_brdrSptLight.png" width="104" height="104" />';
			}
		} else {
				strHTML = '<img class="imgBorder" src="http://cp.match.com/en-ca/msn/index/images/10157_ActionIndex_brdrSptLight.png" width="104" height="104" />';
		}
		 
       strHTML = strHTML + '<img class="jcarousel-match-image" src="' + item.url + '" width="100" height="100" alt="' + item.title + '" />';
		 return strHTML;
    };
    return{
        init: function(){
            getList();
            MatchCore.carousel.spotlightmycarousel.Carousel();
        },
        CarouselItemList: function(){ return mycarousel_itemList; },
        Carousel: function(){
            $jq('#mycarousel').jcarousel({
                scroll: 1,
                visible: 8,
                wrap: 'circular',
                initCallback: mycarousel_initCallback,
                itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback},
                itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback},
                buttonNextHTML: null,
                buttonPrevHTML: null,
                easing: 'easeinout'
                
            });
        }
    }
}();