jQuery(document).ready(function(){

var image_width;

		$('#the_page').hide();

		function image_resize(image_width) {
			
			if($('li.feature_container').length > 0) {

				image_height = $(document).height()*0.85;
				ratio = image_height/$('li.feature_container img').attr('height');
				image_width = $('li.feature_container img').attr('width')*ratio;

				$('li.feature_container img').css({'height':image_height+'px', 'width':image_width+'px'});
			}
			
			// set the spacing for elements (know the width)
	
	    // know the width of the screen
            var screen_width = $(window).width();

        // define the width of each elements
            elem_width = image_width; //500;
            var visible_part_width = image_width/3; //50*2; // the width of the visible part of the picture (2 pictures)
            var elem_margin = ((screen_width-elem_width)-visible_part_width)/4;
        
        
            $('li.feature_container').each( function() {
        
        
				var id = $(this).attr('id');
                            
				//  var elem_width = $('li.feature_container img').css('width');
				//                            var elem_width =    $($('li#'+id).find('img')[0]).width();
        
				elem_margin = ((screen_width-elem_width)-visible_part_width)/2;
				$(this).css({width:elem_width+'px', margin:'0px 0px 0px '+elem_margin+'px'})
            
            
            });
	

		
		// setup things and define click event / navigation
		var incr=0;
      var content_array = new Array();
        

        
        $('li.feature_container').each( function() {
            var id = $(this).attr('id');
            

            
            var img = $($('li#'+id).find('img')[0]).attr('src');
            var page_content =  $('li#'+id).html();
            var img_object =    $($('li#'+id).find('img')[0]);
            
            // click event sur images

            $(img_object).unbind('click');
            
            $(img_object).bind('click', function(e) {


    
    			var id = $(this).attr('id');
                $.scrollTo('#'+id, 1000, {axis:'x', offset: {left:-(screen_width/2-visible_part_width*1.5), top:'0'}});   


// .SHOW ALL IMAGES INSIDE
				$('ul.feature_list li').each( function(){ 
					$(this).children('img').show();
					
				});
// THEN .HIDE THIS SPECIFIC ONE
				$(this).hide();

            
            });
       
            incr=incr+1;

        });
        
        total_width = (elem_width*(incr))+elem_margin*(incr+2);
			    $('ul.feature_list').css({width:total_width+"px"});


				if ($('feature0').length<0) {
					$('ul.feature_list').prepend('<li class="feature_container" id="feature0"></li>');
				}
				
				return (screen_width/2-visible_part_width*1.5);
			
		}
		
		initial_scroll = image_resize(image_width);
		$(window).wresize(image_resize);
		
				
		



	
		

// make HEADER AND TITLE fixed: no movements
		
		if($('h2.OnlineFeature').length>0) {
		
			// the page is using the Online Feature template
			header_top = 10;
			var header_height = $('#header').height();
			var header_marginb = $('#header').css('margin-bottom');
			var title_top = parseFloat(header_height)+parseFloat(header_marginb);

			$('#header').css({'position':'fixed', 'top':'10'});
			$('h2.OnlineFeature').css({'position':'fixed', 'top':title_top});
			
			// make the menu
			
			var buffer_link = "";
			
			$('ul.feature_list li p:last').each(function() {
				
				buffer_link = buffer_link + $(this).html() +"";

			});

//console.log(buffer_link);
			
		}
		
		

// transform navigation links into animated ScrollTo
/*
$('#menu_navigation a').click( function() {
            var id = $(this).attr('id');
            
                $.scrollTo('#'+id, 1000, {axis:'x', offset: {left:-(elem_margin*2+visible_part_width)/1.3, top:'0'}});                
                return false;

});

*/

// extend canvas size
	// multiply known width of elements by var.incr
	
	    		$('#the_page').show();
				$.scrollTo('ul.feature_list li:last', 1000, {axis:'x', offset: {left:-(initial_scroll), top:'0'}}); 
	
});