jQuery(document).ready(function()
{
         var currentImage = "";
         var interfaceLock = false; 
		 
		 
	  	jQuery("#roundrr_container").roundrrwheel(
	  	{
			mode: 'pick', //mode can be pick or standard
			autoplay: false,
			autoplayDirection: 'anticlockwise',
			autoplayDuration: 4000,
			centerClass: 'roundrr_center',
			listClass: 'list', 
			itemClass: 'item', 
			radius: 280, 
			animSpeed:500, 
			centerX: 0, 
			centerY: 0, 
			animationEffect: 1, //(1:off, 5:light,10:heavy, 15:subtle)
			selectEvent: "click", 	
			centerImageSrc: "../static/img/caja.png",
			//on selecting/clicking an item on the wheel
			onSelect: function($selected)
			{  
			showLargeImage($selected, 'noanim');
			},
			//on beginning to spin/animate the wheel
			onNextBegin: function($m)
			{
			   
			   interfaceLock = true;
			 
			},
			onPrevBegin: function($m)
			{
			   
			   interfaceLock = true;
			 
			},
			//once an image has moved under the 'pick'
			onImageFocus: function($item)
			{

            showLargeImage($item, 'none');
		
			 
			},
			//once an image/image set is no longer under the 'pick'
			onImageBlur:  function($item)
			{
			   
			}, 
			//once the animation has completed
			onAnimationComplete: function($menu)
			{
			
			     jQuery('.centerImage').attr('src', currentImage);
			     jQuery('.centerImage').load(function()
			     {
			       
			        interfaceLock = false;
			     });
			
			 
			},
			angleOffset: Math.PI, 
			onShow: function($menuitems)
			{
				$menuitems.each(function(i)
				{
					var $this = jQuery(this);
					$this.delay(i*100).fadeIn(500);
				});
				
				
			}
			
		});
		
		jQuery("#roundrr_container").roundrrwheel("show");
				
		function showLargeImage($i, mode)
		{
			
			interfaceLock = false;
			var thisImage   = $i.find('img');
			var focusedImage = thisImage.attr('src');
            var largerImage = focusedImage.replace('_bigger', '');	
            var imageCaption = thisImage.attr('alt');
                                    
            currentImage = largerImage;
            
            jQuery('#roundrr_caption').fadeIn();
			jQuery('#roundrr_caption').html(imageCaption);
            
            if(mode=='noanim')
            {
				var name = thisImage.attr('id');
				var pos = 0;
				var local = '';
				var visitante = '';
				for(var i=0; i<partidos.length; i++) {
					if (partidos[i][2] == name){
					jQuery('.local').attr('src', currentImage);
					jQuery('.visitante').attr('src', '../static'+partidos[i][4]);
					pos = i;
					local = partidos[i][2]
					visitante = partidos[i][5]
					}
				}
				for(var i=0; i<partidos.length; i++) {	
					if (partidos[i][5] == name){
					jQuery('.visitante').attr('src', currentImage);
					jQuery('.local').attr('src', '../static'+partidos[i][1]);
					pos = i
					local = partidos[i][2]
					visitante = partidos[i][5]
					}
				}
				$("#title").text(local+" vs "+ visitante);
				
				if (partidos[pos][6] == "local")
				{
					//$( "#pnl" ).attr('src', '../static/img/local.png');
                    $("#pnl").text("Pronòstic: local");
				}
				else if (partidos[pos][6] == "visitante")
				{
					//$( "#pnl" ).attr('src', '../static/img/visitante.png');
                    $("#pnl").text("Pronòstic: visitant");
				}
				else 
				{
                    $("#pnl").text("Pronòstic: empat");
					//$( "#pnl" ).attr('src', '../static/img/empate.png');
				}
				
				$( "#pnl" ).show("fade",{direction: 'down'},1500);
				

				
		    }
        }
	  });
