jQuery(document).ready(function(){
    var currentPanel = 0;
    
    jQuery(this).find('.desc').hide();
    jQuery(".btn-playvideo").css('opacity','0');
   
    jQuery(".panel").each(function(i){ 
        jQuery(this).attr("data-width",jQuery(this).width()); 
        jQuery(this).attr("data-height",jQuery(this).height());
    });
    
    jQuery(".panel").mouseover(function(){ jQuery(this).addClass('active') }).mouseout(function(){ jQuery(this).removeClass('active'); });

    /*jQuery("#btn-playvideo").click (function(){ 
            jQuery("#panel5-video").html('<iframe width="500" height="350" src="http://www.youtube.com/embed/og7LeuZUpNY?autoplay=1&rel=0" frameborder="0" allowfullscreen></iframe>');
    })*/
    
    jQuery(".videopanel").click(function(i){
       
			
	});
    
    jQuery("#btn-playvideo1").click (function(){ 
            jQuery("#panel1-video").html('<iframe width="500" height="350" src="http://www.youtube.com/embed/yHGCCdc5gX0?autoplay=1&rel=0" frameborder="0" allowfullscreen></iframe>');
    })
    
    jQuery("#btn-playvideo2").click (function(){ 
            jQuery("#panel2-video").html('<iframe width="500" height="350" src="http://www.youtube.com/embed/72TbRhsrXw4?autoplay=1&rel=0" frameborder="0" allowfullscreen></iframe>');
    })
    
    jQuery("#btn-playvideo3").click (function(){ 
            jQuery("#panel3-video").html('<iframe width="500" height="350" src="http://www.youtube.com/embed/kU0YmmN5Vr0?autoplay=1&rel=0" frameborder="0" allowfullscreen></iframe>');
    })
    
    jQuery("#btn-playvideo4").click (function(){ 
            jQuery("#panel4-video").html('<iframe width="500" height="350" src="http://www.youtube.com/embed/oyojVj8Dw5U?autoplay=1&rel=0" frameborder="0" allowfullscreen></iframe>');
    })
    
    jQuery("#btn-playvideo5").click (function(){ 
            jQuery("#panel5-video").html('<iframe width="500" height="350" src="http://www.youtube.com/embed/og7LeuZUpNY?autoplay=1&rel=0" frameborder="0" allowfullscreen></iframe>');
    })
    
    jQuery("#btn-playvideo6").click (function(){ 
            jQuery("#panel6-video").html('<iframe width="500" height="350" src="http://www.youtube.com/embed/og7LeuZUpNY?autoplay=1&rel=0" frameborder="0" allowfullscreen></iframe>');
    })
    
    jQuery(".panel").click(function(i){
        var wbox = "500px";
        var hbox = "350px";
                
        jQuery(this).animate({backgroundPosition: '0px 0px', width: wbox, height: hbox}, { queue: false, duration: 1000 });
        jQuery(this).find('.caption').animate( { width: '400px' }, { queue: false, duration: 1000 });
        
        var selected = jQuery(this).attr('rel');
        if (selected != currentPanel) {
            jQuery(".btn-playvideo").animate( { opacity: 0 }, { queue: true, duration: 200 }); 
        
            jQuery(this).find('.desc').css('opacity','0');
            jQuery(this).find('.desc').slideDown('fast',function(){
                jQuery(this).animate( { opacity: 1 }, { queue: true, duration: 1200 }); 
            });
       		 
            jQuery(".panel").each(function(i){            
                if (jQuery(this).attr('rel') != selected){ 

                    w = jQuery(this).attr("data-width") * 0.6;
                    h = jQuery(this).attr("data-height") * 0.6;
                    jQuery(this).animate( { width: w,height:h }, { queue: false, duration: 1000 });
                       
                    jQuery(this).find('.caption').animate( { width: (w*0.93) }, { queue: false, duration: 1000 });
                    jQuery(this).find('.desc').slideUp();
                                            
                var rel = jQuery(this).attr('rel');
                     if (rel == '1') { 
                     	jQuery(this).animate({backgroundPosition: '-22px -46px'},   { queue: false, duration: 1000 }); } 
                else if (rel == '2') { 
                		jQuery(this).animate({backgroundPosition: '-20px -100px'},  { queue: false, duration: 1000 }); } 
                else if (rel == '3') { 
                		jQuery(this).animate({backgroundPosition: '0px 0px'}, 		{ queue: false, duration: 1000 }); }  
                else if (rel == '4') { 
                		jQuery(this).animate({backgroundPosition: '-230px -120px'}, { queue: false, duration: 1000 }); } 
                else if (rel == '5') { 
                		jQuery(this).animate({backgroundPosition: '-230px -160px'}, { queue: false, duration: 1000 }); } 
                else if (rel == '6') { 
                		jQuery(this).animate({backgroundPosition: '-278px -110px'}, { queue: false, duration: 1000 }); }
                else if (rel == 'v1') { 
                		jQuery(this).animate({backgroundPosition: '-72px -55px'},   { queue: false, duration: 1000 }); }
                else if (rel == 'v2') { 
                		jQuery(this).animate({backgroundPosition: '-145px -100px'}, { queue: false, duration: 1000 }); }
               	else if (rel == 'v3') { 
                		jQuery(this).animate({backgroundPosition: '-218px -56px'},  { queue: false, duration: 1000 }); }
                else if (rel == 'v4') { 
                		jQuery(this).animate({backgroundPosition: '-145px -100px'}, { queue: false, duration: 1000 }); }
                else if (rel == 'v5') { 
                		jQuery(this).animate({backgroundPosition: '-145px -100px'}, { queue: false, duration: 1000 }); }
                else if (rel == 'v6') { 
                		jQuery(this).animate({backgroundPosition: '-145px -100px'}, { queue: false, duration: 1000 }); }		
                
                 
                 jQuery(".panel-video").html("");
            }else 
            {
            	jQuery(this).find(".btn-playvideo").animate( { opacity: 1 }, { queue:true, duration: 2000 });
            }
        });   
        
        currentPanel = selected;
        } 
    })       
});