jQuery(document).ready(function() {
        jQuery('#banner').nivoSlider();
		
		var offerLen = jQuery('.tag').text().length;
		//alert(offerLen);
		// Slider Function
		if(offerLen == 19){
			jQuery('.tag').css('background-image', 'url(images/tag_bg1.png)');
			jQuery('.tag').css('width', 148);
			jQuery('.rightTag').css('width', 444);
		}else if(offerLen == 20){
			jQuery('.tag').css('background-image', 'url(images/tag_bg2.png)');
			jQuery('.tag').css('width', 155);
			jQuery('.rightTag').css('width', 449);
		}else if(offerLen == 21){
			jQuery('.tag').css('background-image', 'url(images/tag_bg3.png)');
			jQuery('.tag').css('width', 163);
			jQuery('.rightTag').css('width', 456);
		}else if(offerLen >= 22){
			jQuery('.tag').css('background-image', 'url(images/tag_bg4.png)');
			jQuery('.tag').css('width', 170);
			jQuery('.rightTag').css('width', 463);
		}
		
	var ulWidth=0;
	jQuery('').each
	jQuery('#carousel_ul li').each(function(index) {
		ulWidth += jQuery('#carousel_ul li').width();
	 });
	
	//alert(ulWidth);
	jQuery('#carousel_ul').css('width', ulWidth + 50);
	//move he last list item before the first item. The purpose of this is if the user clicks to slide left he will be able to see the last item.
        jQuery('#carousel_ul li:first').before(jQuery('#carousel_ul li:last')); 
        
        
        //when user clicks the image for sliding right        
        jQuery('#right_scroll img').click(function(){
        
            //get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '
            var item_width = jQuery('#carousel_ul li').outerWidth();
            
            //calculae the new left indent of the unordered list
            var left_indent = parseInt(jQuery('#carousel_ul').css('left')) - item_width;
            
            //make the sliding effect using jquery's anumate function '
            jQuery('#carousel_ul:not(:animated)').animate({'left' : left_indent},500,function(){    
                
                //get the first list item and put it after the last list item (that's how the infinite effects is made) '
                jQuery('#carousel_ul li:last').after(jQuery('#carousel_ul li:first')); 
                
                //and get the left indent to the default -210px
                jQuery('#carousel_ul').css({'left' : '-217px'});
            }); 
        });
        
        //when user clicks the image for sliding left
        jQuery('#left_scroll img').click(function(){
            
            var item_width = jQuery('#carousel_ul li').outerWidth();
            
            /* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */
            var left_indent = parseInt(jQuery('#carousel_ul').css('left')) + item_width;
            
            jQuery('#carousel_ul:not(:animated)').animate({'left' : left_indent},500,function(){    
            
            /* when sliding to left we are moving the last item before the first list item */            
            jQuery('#carousel_ul li:first').before(jQuery('#carousel_ul li:last')); 
            
            /* and again, when we make that change we are setting the left indent of our unordered list to the default -210px */
            jQuery('#carousel_ul').css({'left' : '-217px'});
            });
            
            
        });
		
	//inside Right Slider
        jQuery('.rightWarper ul li:first').before(jQuery('.rightWarper ul li:last')); 
        //when user clicks the image for sliding right        
        jQuery('#dn').click(function(){
        
            var item_width = jQuery('.rightWarper ul li').outerHeight();
			var left_indent = parseInt(jQuery('.rightWarper ul').css('top')) - item_width;
            jQuery('.rightWarper ul:not(:animated)').animate({'top' : left_indent},500,function(){    
                jQuery('.rightWarper ul li:last').after(jQuery('.rightWarper ul li:first')); 
                jQuery('.rightWarper ul').css({'top' : '-131px'});
            }); 
        });
        
        //when user clicks the image for sliding left
        jQuery('#up').click(function(){
            var item_width = jQuery('.rightWarper ul li').outerHeight();
            var left_indent = parseInt(jQuery('.rightWarper ul').css('top')) + item_width;
            jQuery('.rightWarper ul:not(:animated)').animate({'top' : left_indent},500,function(){    
            	jQuery('.rightWarper ul li:first').before(jQuery('.rightWarper ul li:last')); 
            	jQuery('.rightWarper ul').css({'top' : '-131px'});
            });
        });
		
	// Second Slider
		
	var ul2Width=0;
	jQuery('').each
	jQuery('.brandSlider li').each(function(index) {
		ul2Width += jQuery('.brandSlider ul li').width();
	 });
	
	//alert(ulWidth);
	jQuery('.brandSlider ul').css('width', ul2Width);
	//move he last list item before the first item. The purpose of this is if the user clicks to slide left he will be able to see the last item.
        jQuery('.brandSlider ul li:first').before(jQuery('.brandSlider ul li:last')); 
        
        
        //when user clicks the image for sliding right        
        jQuery('.rightArrowBox img').click(function(){
        
            //get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '
            var item_width = jQuery('.brandSlider ul li').outerWidth();
            
            //calculae the new left indent of the unordered list
            var left_indent = parseInt(jQuery('.brandSlider ul').css('left')) - item_width;
            
            //make the sliding effect using jquery's anumate function '
            jQuery('.brandSlider ul:not(:animated)').animate({'left' : left_indent},500,function(){    
                
                //get the first list item and put it after the last list item (that's how the infinite effects is made) '
                jQuery('.brandSlider ul li:last').after(jQuery('.brandSlider ul li:first')); 
                
                //and get the left indent to the default -210px
                jQuery('.brandSlider ul').css({'left' : '-89px'});
            }); 
        });
        
        //when user clicks the image for sliding left
        jQuery('.leftArrowBox img').click(function(){
            
            var item_width = jQuery('.brandSlider ul li').outerWidth();
            
            /* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */
            var left_indent = parseInt(jQuery('.brandSlider ul').css('left')) + item_width;
            
            jQuery('.brandSlider ul:not(:animated)').animate({'left' : left_indent},500,function(){    
            
            /* when sliding to left we are moving the last item before the first list item */            
            jQuery('.brandSlider ul li:first').before(jQuery('.brandSlider ul li:last')); 
            
            /* and again, when we make that change we are setting the left indent of our unordered list to the default -210px */
            jQuery('.brandSlider ul').css({'left' : '-89px'});
            });
            
            
        });
		
		// Third Slider
		
	var ul3Width=0;
	jQuery('').each
	jQuery('.clientSlider li').each(function(index) {
		ul3Width += jQuery('.clientSlider ul li').width();
	 });
	
	//alert(ulWidth);
	jQuery('.clientSlider ul').css('width', ul2Width);
	//move he last list item before the first item. The purpose of this is if the user clicks to slide left he will be able to see the last item.
        jQuery('.clientSlider ul li:first').before(jQuery('.clientSlider ul li:last')); 
        
        
        //when user clicks the image for sliding right        
        jQuery('.rightArrowBox2 img').click(function(){
        
            //get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '
            var item_width = jQuery('.clientSlider ul li').outerWidth();
            
            //calculae the new left indent of the unordered list
            var left_indent = parseInt(jQuery('.clientSlider ul').css('left')) - item_width;
            
            //make the sliding effect using jquery's anumate function '
            jQuery('.clientSlider ul:not(:animated)').animate({'left' : left_indent},500,function(){    
                
                //get the first list item and put it after the last list item (that's how the infinite effects is made) '
                jQuery('.clientSlider ul li:last').after(jQuery('.clientSlider ul li:first')); 
                
                //and get the left indent to the default -210px
                jQuery('.clientSlider ul').css({'left' : '-89x'});
            }); 
        });
        
        //when user clicks the image for sliding left
        jQuery('.leftArrowBox2 img').click(function(){
            
            var item_width = jQuery('.clientSlider ul li').outerWidth();
            
            /* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */
            var left_indent = parseInt(jQuery('.clientSlider ul').css('left')) + item_width;
            
            jQuery('.clientSlider ul:not(:animated)').animate({'left' : left_indent},500,function(){    
            
            /* when sliding to left we are moving the last item before the first list item */            
            jQuery('.clientSlider ul li:first').before(jQuery('.clientSlider ul li:last')); 
            
            /* and again, when we make that change we are setting the left indent of our unordered list to the default -210px */
            jQuery('.clientSlider ul').css({'left' : '-60px'});
            });
            
            
        });
});

// Function For Inside Tabing

function tabing(active, tabId){
	$('.tabimg ul li').removeClass('active');
	$(active).parent('li').addClass('active');
	$('.tabContent').slideUp('slow');
	$('#'+tabId).slideDown('slow');
}