$(function(){
	 $('#gallery li').each(function(idx) {
	        $(this).data('index', (++idx));
	    });

		$('#gallery').jcarousel({		
			scroll: 5,
			size: r_picture.length,
			initCallback: mycarousel_itemLoadCallback

		}); 
		
		function mycarousel_itemLoadCallback(carousel, state)
		{
		    for (var i = 1; i <= r_picture.length; i++) {
		        carousel.add(i, mycarousel_getItemHTML(r_picture[i-1]));
		    }
		    $('#gallery li:first-child').addClass('active');
		};
		
		function mycarousel_getItemHTML(item)
		{
		    return '<a href="'+ item.pic +'" title="'+item.desc+'" ><img src="' + item.thumb + '" style="height:56px;width:94px;" alt="' + item.desc + '"  /></a>';
		};
		
		
		$('#gallery').galleria({
			history   : false, 
			clickNext : true, // helper for making the image clickable
			insert    : '#gallery_main', // the containing selector for our main image
			onImage   : function(image,caption,thumb) { // let's add some image effects for demonstration purposes
				
	            
	            // animate active thumbnail's opacity to 1, other list elements to 0.6
	            thumb.parent().fadeTo(200, 1).siblings().fadeTo(200, 0.4);
	            thumb.parent().addClass('thump-active').siblings().removeClass('thump-active');
	            // $('#gallery_main').data('currentIndex', $li.data('index')).trigger('image-loaded')
	            
	            
			},
			onThumb : function(thumb) { // thumbnail effects goes here
				
				var $li = thumb.parent(),
                opacity = $li.is('.active') ? 1 : 0.4;
            
				// hover effects for list elements
	            $li.hover(
	                function() { $li.fadeTo(20, 1); },
	                function() { $li.not('.active').fadeTo(20, opacity); }
	            )			
			}
		});
		
		
		
		// ----------------------- Load Images
		
		$('#gallery').children('li').each(function(){
			var src = $(this).find('img').attr('href');
		//	alert(src);
		  } 
		);
		
		 $("#frame-refer2friends").dialog({
				bgiframe: true,
				autoOpen: false,
				height: 500,
				width:620,
				modal: true
				
				
			});
		
		
		
		
		
		
		
		
	});