selected = 0;
lastSelected = 0;
noofitems = 0;
cArray = new Array();
wArray = new Array();
textcolor = '#000000';

$(document).ready(function(){  

	$(document).find(".jFlowControl").each(function(i)
  {
			 cArray[i] = $(this);
			 
			 
			 if(i == selected)
			 {
			   textcolor = cArray[i].css('color'); 
			   cArray[i].css( {  'font-weight': 'bold', 'color' : '#000000' });
			 }
			 else
			 {
			  cArray[i].css( {  'font-weight': 'normal', 'color' : textcolor});
			 }
			 
			 cArray[i].attr('id', i);
			 
      // click function for each controller
      $(this).click(function()
      {
      
      // alert(wArray[selected].width());
      
        if( selected == $(this).attr('id') )
          return;
          
        cArray[selected].css( {  'font-weight': 'normal', 'color' : textcolor});
        lastSelected =  selected;
        selected = $(this).attr('id');
			  cArray[selected].css( {  'font-weight': 'bold', 'color' : '#000000' });
			  

			  wArray[selected].animate (
			  {
			     left: 0,
			     zIndex: 5001
			  }, 400);
           
           
			  wArray[lastSelected].animate (
			  {
			     left: -(wArray[i].width() + 20),
			     zIndex: 5000
			     
			  }, 400, function(){ 
        
                 wArray[lastSelected].css( { 
                left: wArray[i].width() + 20, 
                top: top
                });  
        
        
           }); 

			  
      

			noofitems++; 
	});	
	});
	
	$(document).find(".slide-wrapper").each(function(i)
  {
  		wArray[i] = $(this);
  		
  		 if(i == 0)
			 {
			   wArray[i].css( { 
                position: 'absolute',
                zIndex: 5001,
                left: 0, 
                top: 0,
                width: wArray[i].width()
                });
			 }
			 else
			 {
			   wArray[i].css( { 
                position: 'absolute',
                zIndex: 5000,
                left: wArray[i].width() + 20, 
                top: 0,
                width: wArray[i].width()
                });
			 }
			
	});
	

});