<?php
/* Aqua Tabs Block */
if(!class_exists('AQ_Slideshow_Block')) {
	class AQ_Slideshow_Block extends AQ_Block {
	
		function __construct() {
			$block_options = array(
				'name' => 'Slideshow',
				'size' => 'span12',
				'resizable' => 1,
			);
			
			//create the widget
			parent::__construct('aq_slideshow_block', $block_options);
			
			
			
		}
		
		function form($instance) {
		
			$slideshow_options = array(
			'slide' => 'Slide',
			'fade' => 'Fade',
		
			
		);
			
			$instance = wp_parse_args($instance, $defaults);
			extract($instance);
			
			
			?>
            
			<div class="description cf">
            <p class="description">
            <label for="<?php echo $this->get_field_id('tab_title') ?>">
				 Titre
				<?php echo aq_field_input('tab_title', $block_id, $tab_title, $size = 'full') ?>
			</label>
            
            </p>
				
			</div>
            <label for="<?php echo $this->get_field_id('slideshow_id') ?>">
				<div style="width:200px; float:left;">Identifiant</div>
				<?php echo aq_field_input('slideshow_id', $block_id, $slideshow_id, $size = 'min') ?>
			</label>
            <br />
            <label><?php _e( 'Categorie' ); ?>:</label>
		<div style="width:250px;"><?php wp_dropdown_categories( array( 'show_option_all' => __('ALL'),'hide_empty'  => 0,'name' => $this->get_field_name("cat_posts"), 'selected' => $instance["cat_posts"] ) ); ?></div>
        	<br />
            <label for="<?php echo $this->get_field_id('number_post') ?>">
				<div style="width:200px; float:left;">Nombre d'articles</div>
				<?php echo aq_field_input('number_post', $block_id, $number_post, $size = 'min') ?>
			</label>
            <br />
            <label for="<?php echo $this->get_field_id('excerpth1') ?>">
				<div style="width:200px; float:left;">Longueur des extraits</div>
				<?php echo aq_field_input('excerpth1', $block_id, $excerpth1, $size = 'min') ?>
			</label>
            <br />
			<label for="<?php echo $this->get_field_id('slideshow_effect') ?>">
				Choisissez l'effet.<br/>
				<div style="width:250px;"><?php echo aq_field_select('slideshow_effect', $block_id, $slideshow_options, $slideshow_effect, $block_id); ?></div>
			</label>
            <br />
            <label for="<?php echo $this->get_field_id('speed_slideshow') ?>">
				<div style="width:200px; float:left;">Vitesse du slideshow en second</div>
				<?php echo aq_field_input('speed_slideshow', $block_id, $speed_slideshow, $size = 'min') ?>
			</label>
           <br/> 
            <p class="description">
           <h4>Options</h4>
        <div style="width:236px; float:left;"><label><?php _e( 'Afficher le titre des articles' ); ?>:</label></div>
		<?php echo aq_field_checkbox ('title_display', $block_id, $title_display) ?>
        <br/> <br/>
        <label for="<?php echo $this->get_field_id('text_fonts_color') ?>">
				Couleur de fond pour le texte<br/>
				<?php echo aq_field_color_picker('text_fonts_color', $block_id, $text_fonts_color, $defaults['text_fonts_color']) ?>
		</label>
             <br/> <br/>
        <label for="<?php echo $this->get_field_id('title_fonts_color') ?>">
				Couleur du texte<br/>
				<?php echo aq_field_color_picker('title_fonts_color', $block_id, $title_fonts_color, $defaults['title_fonts_color']) ?>
		</label>
        	</p>

			<?php
		}
		
		
		
		
		function block($instance) {
			extract($instance);
			
		
			
			
			
				
				echo '<h2 class="title-video"><span>'.$tab_title.'</span></h2>';
				
	
				
				
				
			?><!-- FlexSlider -->
            
            <div id="slides-flex" class="flexslider <?php echo $slideshow_id; ?> ">
		        <ul class="slides">
		 <?php         $args= array(
			'showposts' => $number_post,
			'cat' => $cat_posts,
			'category__not_in'  => array('9'),
			);
			
$the_query = new WP_Query($args);
while ($the_query->have_posts()) : $the_query->the_post();
						
				
		
  	   // Votre boucle 
	
   if (has_post_thumbnail()) {
 $thumb = get_post_thumbnail_id(); $img_url = wp_get_attachment_url( $thumb,'full' ); $image = sp_resize( $img_url, 400, 250, true ); ?>
<li><a href="<?php the_permalink() ?>"><img src="<?php echo $image ?>" border="0"/></a>  
<?php  } else { }  ?> 

<?php if ($title_display) { ?>

<div class="container-flex">
   <div class="flex-txt-content-<?php echo $slideshow_id; ?>">
    <h2><?php the_title(); ?></h2>
    <p><?php echo excerpt($excerpth1);?></p>
    <div class="read-post-<?php echo $slideshow_id; ?>"><a href="<?php the_permalink() ?>">Lire la suite</a></div>
   </div>
   <div class="background-flex-<?php echo $slideshow_id; ?>"></div>
</div>

<?php } else {} ?>

 </li>
<?php // Votre boucle fin


endwhile;

?>
		        </ul>
		 </div>    
              
              
				<style>
				
.container-flex {
    position: absolute;
	left:60%;
	width:37%;
	height:98.4%;
	right:0;
	top: 0;
	z-index:1;
	padding:5px 10px 0 10px;
   }
.container-flex h2 {
 
	font-size:24px;
   }
   .flex-txt-content-<?php echo $slideshow_id; ?> h2 {
       position:relative;
       color:<?php echo $title_fonts_color;?>;
       z-index:5;
	   margin-top:8px;
	   
	  
   }
   
    .flex-txt-content-<?php echo $slideshow_id; ?> p {
       position:relative;
       color:<?php echo $title_fonts_color;?>;
       z-index:5;
	 
	   
	  
   }
   
   .read-post-<?php echo $slideshow_id; ?> a {
	   
	   color:<?php echo $title_fonts_color;?>;
	   
   }
   
   .read-post-<?php echo $slideshow_id; ?> a:hover {
	   
	   color:<?php echo $title_fonts_color;?>;
	   
   }
   
   .read-post-<?php echo $slideshow_id; ?> {
	   padding:8px 15px 8px 15px;
	   border: solid 1px <?php echo $title_fonts_color;?>;
	   color:<?php echo $title_fonts_color;?>;
	   position:relative;
	   z-index:5;
	   width:70px;
	   float:right;
   }

   .background-flex-<?php echo $slideshow_id; ?> {
       position:absolute;
       top:0px;
       left:0px;
       width:100%;
       height:100%;
       background-color: <?php echo $text_fonts_color;?>;
       z-index:1;
     
   }
   
   @media screen and (max-width: 860px) {
 .container-flex {
    position: absolute;
	left:0;
	width:96.4%;
	height: auto;
	right:0;
	bottom:0;
	top: auto;
	bottom:0;
	z-index:1;
	padding:5px 10px 5px 10px;
   }
   
    .background-flex-<?php echo $slideshow_id; ?> {
      
       background-color: <?php echo $text_fonts_color;?>;
       z-index:1;
    
   }
}
   
    @media only screen and (max-width: 767px) {
		
		.container-flex  {
			left:0;
	right:0;
	bottom:0;
	z-index:1;
	padding:5px 10px 5px 10px;
		}
		.container-flex h2 {
			font-size:14px;
		}
		
		.flex-txt-content-<?php echo $slideshow_id; ?> p {
			display:none;

   }
	}
	
	@media only screen 
and (max-width : 480px)  {
	
	.container-flex  {
		display:none;
		}
	
}
	
	</style>
			
            <?php  $time_speed = $speed_slideshow * 1000; ?>
				  				  
				<script type='text/javascript'>
				  $(window).load(function(){
				    $('.<?php echo $slideshow_id; ?>').flexslider({
				      animation: '<?php               
                        switch($slideshow_effect) {	
			case 'slide':
				echo 'slide';
				break;
			case 'fade':
				echo 'fade';	
				break;
				} ?>',
				      controlNav: true,
					  pauseOnAction: true,
					  pauseOnHover: true,
					  slideshowSpeed : <?php echo $time_speed; ?>,
				      start: function(slider){
				        $('body').removeClass('loading');
				      }
				    });
				  });
				</script>
				
			
            <?php
			
						
		}
		
	
	}
}
