<div id="menu_services">
 
  <div id="overlay" class="overlay" style="display:none;"></div>
   
<div id="modal" class="modal" style="display:none;">
   <a href="#" class="prev"></a>
   <a href="#" class="next"></a>
   <span class="close"></span>
   <h2 id="blog_info"></h2>
   <div id="latest_post" class="loading"></div>
            <h3>35 Examples of Food Inspired Logo Designs</h3>
            <div class="line"></div>
            <p>The logo is the most important element in the process of building brand identity and a company without a logo is like a confused person. Each business niche has its own logo design style which emphasis the role and target of the company.Bellow I selected some great Food Inspired Logo Designs which points out exactly the characteristics of a food company. Hope you`ll find the post inspirational and will make you start thinking about the importance of a logo!</p>
            <a class="button" target="" href="http://www.ourtuts.com/35-examples-of-food-inspired-logo-designs/">
   En savoir plus</a>      
   </div>
         
<div id="modal" class="modal" style="display:none;">
   <a href="#" class="prev"></a>
   <a href="#" class="next"></a>
   <span class="close"></span>
   <h2 id="blog_info"></h2>
   <div id="latest_post" class="loading"></div>
            <h3>0 Examples of Food Inspired Logo Designs</h3>
            <div class="ourtuts"></div>
            <p>The logo is the most important element in the process of building brand identity and a company without a logo is like a confused person. Each business niche has its own logo design style which emphasis the role and target of the company.Bellow I selected some great Food Inspired Logo Designs which points out exactly the characteristics of a food company. Hope you`ll find the post inspirational and will make you start thinking about the importance of a logo!</p>
            <a class="button" target="" href="http://www.ourtuts.com/35-examples-of-food-inspired-logo-designs/">
   En savoir plus</a>      
   </div>
   
 
   
  <div class="content">
 
   <ul id="friendsList" class="friendsList">
    <li class="ourtuts"><a href="#"><em>Pain</em><span>Conception</span></a></li>
    <li class="devisefunction"><a href="#"><em>Kakuzu</em><span>Réalisation</span></a></li>
    <li class="bluefaqs"><a href="#"><em>PHidan</em><span>Modélisation</span></a></li>
    <li class="w3avenue"><a href="#"><em>Itachi</em><span>Montage vidéo</span></a></li>
    <li class="tzine"><a href="#"><em>Oro</em><span>Création</span></a></li>
    <li class="fearlessflyer"><a href="#"><em>Dedidara</em><span>Présentation</span></a></li>
    <li class="wordrom"><a href="#"><em>Sasori</em><span>Site Internet</span></a></li>
                <li class="wordrom"><a href="#"><em>Kisame</em><span>Cours</span></a></li>
   </ul>
  </div>
 
        <div>
</div>
 
        <!-- The JavaScript -->
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
      <script type="text/javascript">
            $(function() {
    /**
    * solve IE AJAX cache problem
    */
    $.ajaxSetup({cache: false});
                 
    /**
    * the index of the current element / blog selected
    * and the total number of elements / blogs
    */
    var current = -1;
    var total = $('#friendsList').children().length;
     
    /**
    * when we click on a blog link,
    * we get the latest post with an AJAX request
    */
    $('#friendsList a').bind('click',function(e){
     var $this = $(this);
     show();
     var $elem = $this.parent();
     current  = $elem.index() + 1;
     var source  = $elem.attr('class');
     /**
     * add the title and image of the blog
     */
     $('#blog_info').empty()
           .html('<img src="images/' + source + '.jpg"></img>' + $this.find('em').html());  
     $.get('rss.class.php', {source:source} , function(data) {
      $('#latest_post').removeClass('loading').html(data);
     });
     e.preventDefault();
    });
     
    /**
    * show the dialog with the post
    */
    function show(){
     $('#overlay').show();
     if(!$('#modal').is(':visible'))
     $('#modal').css('left','-260px')
          .show()
          .stop()
           .animate({'left':'50%'}, 500);
    }
     
    /**
    * hide the dialog
    */
    function hide(){
     $('#modal').stop()
          .animate({'left':'150%'}, 500, function(){
         $(this).hide();
         $('#overlay').hide();
         $('#latest_post').empty();
          });
    }
     
    /**
    * clicking on the cross hides the dialog
    */
    $('#modal .close').bind('click',function(){
     hide();
    });
     
    /**
    * clicking on the next on the dialog
    */
    $('#modal .next').bind('click',function(e){
     if(current == total){  
      e.preventDefault();
      return;
     }  
     $('#latest_post').empty().addClass('loading');
     $('#friendsList li:nth-child('+ parseInt(current+1) +')').find('a').trigger('click');
     e.preventDefault();
    });
     
    /**
    * clicking on the prev on the dialog
    */
    $('#modal .prev').bind('click',function(e){          
     if(current == 1){  
      e.preventDefault();
      return;
     }  
     $('#latest_post').empty().addClass('loading');
     $('#friendsList li:nth-child('+ parseInt(current-1) +')').find('a').trigger('click');
     e.preventDefault();
    });
            });
   
   
   
        </script>