var firstItem = 0;
    var lastItem = 3;
    
    var slideRight = function() {
        //Move to the left
        $('#slider .artist').animate({
            left: '+=172px'
        }, "slow");
        
        firstItem += 1;
        lastItem -= 1;
        checkArrows();
    };
    
    var slideLeft = function() {
        //Move to the right
        $('#slider .artist').animate({
            left: '-=172px'
        }, "slow");
        
        firstItem -= 1;
        lastItem += 1;
        checkArrows();
    };
    
    var checkArrows = function() {
        if(firstItem==0)
            $('#arrowRight').addClass('disabledArrow');
        else
            $('#arrowRight').removeClass('disabledArrow');
            
        if(lastItem==($('#slider .artist').size()-1))
            $('#arrowLeft').addClass('disabledArrow');
        else
            $('#arrowLeft').removeClass('disabledArrow');
    }
    
    var displayArtist = function() {
        //We save displayed artist info
        var infoBig = $('.artist-top p.info').html();
        var imgBig = $('.bigPicture img').attr('src'); 
        var linkBig = $('.bigPicture').find('img').attr('link');
        
        //Cufon makes a <cufon> element for each word, therefore
        //we have to iterate
        
		if($('.artist-top h1 cufontext').length > 0) {
	       	var nameBigWords = $('.artist-top h1 cufontext'); //this is an array
	        var nameBig = '';
	        $(nameBigWords).each(function(index){
	            nameBig += $(this).html();
	        });
        }else {
			var nameBig = $('.artist-top h1').text();
		}
    
    	
    	//We save artist info from the clicked artist
    	var nameSmall = $(this).find('h2').html();
    	var infoSmall = $(this).find('p.info').html();
    	var imgSmall = $(this).find('img').attr('src');
    	var positionSmall = $(this).css('left');
    	var link = $(this).find('img').attr('link');
    	
    	
    	//We build the new small artist
        var smallArtist = 
            '<div class="artist newInserted" style="display: none; left: '+positionSmall+'">\
    			<div class="smallPicture">\
    				<img src="'+imgBig+'" link="'+linkBig+'" width="160px" height="90px"/>\
    				<p class="info">'+infoBig+'</p>\
    				<div class="nameContainer">\
    					<div class="background"></div>\
    					<h2>'+nameBig+'</h2>\
    				</div>\
    			</div>\
    		</div>';
    	
    	//We build the new big artist
    	var bigArtist =
    	    '<div class="artist-top" style="display: none">\
				<a href="'+link+'"><h1>'+nameSmall+'</h1></a>\
				<p class="info">'+infoSmall+'</p>\
			</div>';
    	
    	//We make the replacement of the big artist...
    	
		$('.bigPicture').addClass('bigPictureLoad');
		$('.bigPicture img').attr('src',"http://nowhiphop.com/media/images/ajax.gif");
		
		$('.artist-top').fadeOut('fast',function(){
    	    $('.artist-top').replaceWith(bigArtist);
    	   
    	    $('.bigPicture a').attr('href',link);
    	    $('.bigPicture img').attr('link',link);
    	    Cufon.refresh('h1');
    	    $('.artist-top').fadeIn('fast');

    	    var image = $('.bigPicture img').clone();
    	    $(image).attr('src',imgSmall.replace("_med",""));
    	    $('.bigPicture').removeClass('bigPictureLoad');
    	    $('.bigPicture img').replaceWith(image);
    	});
    	
    	
    	//..and we make the replacement of the small artist
    	$(this).fadeOut('fast',function(){
    	    $(this).replaceWith(smallArtist);
    	    $(this).remove();
    	    //note we use the class newInserted to find the new small artist
    	    $('.artist.newInserted').fadeIn('fast').removeClass('newInserted');
    	});
    }

    
    $('#arrowLeft').click(function(){
        if($(this).hasClass('disabledArrow'))
            return;
        else
            slideLeft();
    });
    $('#arrowRight').click(function(){
        if($(this).hasClass('disabledArrow'))
            return;
        else
            slideRight();
    });
    
    //Note we use live events, in order to bind functions to future elements
    $('.artist .smallPicture').live('mouseover',
        function(){
           $(this).children('.nameContainer').show();
        });
    $('.artist .smallPicture').live('mouseout',    
        function(){
            $(this).children('.nameContainer').hide();
        }
    );
    
    $('.artist').live('click',displayArtist);