//10/10/2007
//Created for Philip Morris USA site
/* 
    1. allows user to scoll through the offices photo if the number grow more than the display number
    2. when user click on the office photo, display office detail information on top, if content is
    longer than viewable space, show slider and indicator, which allows user to scroll down to view
    rest of the content.
*/

      var current = 1; //the current office at position 0, left = 0
      var totalPanel; //total number of office
      var displayNum = 6; // number of offices displaying
      var slideMargin = 132; //width to move
      var leftPos; //margin size to 
      var viewHeight = 175; //viewable hieght for content
      var sliderHeight = 186; //the height of slider
  
      $(document).ready(function() {
            $('#slideContainer div.panel').each(function(inx) {
                $(this).css('left', slideMargin*inx); //set left value of each office
                $(this).hover( function() { //bind mouseover and mouseout function
                    $(this).addClass('panel_over'); $(this).find('.go').show(); $(this).find('.officeName').hide(); $(this).find('.officeNameOver').show();
                }, function() { 
                    $(this).removeClass('panel_over'); $(this).find('.go').hide(); $(this).find('.officeNameOver').hide(); $(this).find('.officeName').show();
                });
                
                $(this).click( function() { showOfficeDetail(inx+1); }); //bind on click event
            });        
            totalPanel = $('.panel').size();//get number of the panel
            $('#left').click(function() { slideRight(); });
            $('#right').click(function() { slideLeft(); });
            
            $('.close').click( function() {
                $('.office').hide();
            });   
      });
      
      function showOfficeDetail(inx) {    
            $('.office').hide(); //hide all office detail div
            
            /* once the copy is showed, we can calculate the copy height*/            
            $('#office' + inx).show();            
            
            /** if copy is less than the showing height, hide the slider */
            if ($('#office' + (inx)).find('.officecopy').height() < viewHeight) {
                $('#office' + (inx)).find('.slider').hide();
                $('#office' + (inx)).find('.indicator').hide();
            }
            else { //set indicator height 
                var indicatorHeight = sliderHeight * viewHeight / $('#office' + (inx)).find('.officecopy').height();
                $('#office' + (inx)).find('.indicator').css('height', indicatorHeight);  
                $('#office' + (inx)).find('.slider').show();
                $('#office' + (inx)).find('.indicator').show();
            }   
                    
            /* create slider */              
            $('#slider' + (inx)).Slider(
            {
                accept :  '#indicator' + (inx),
                onSlide : function( cordx, cordy )
                {    
                    var mTop = Math.floor(($('#office' + (inx)).find('.officecopy').height() - viewHeight) * (cordy) / 100) * -1;
                    $('#office' + (inx)).find('.officecopy').css('margin-top', mTop);
                }
            });   
            
            //binding previous and next button event
            $('#office' + inx).find('.prev').click( function() { (inx > 1) ? showOfficeDetail(inx-1) : showOfficeDetail(totalPanel); });
            $('#office' + inx).find('.next').click( function() { (inx < totalPanel) ? showOfficeDetail(inx+1) : showOfficeDetail(1); });            
      }
      
      function slideLeft() { //move slides to the left
          if (totalPanel - current >= displayNum) {
                for ( var i=0; i < totalPanel; i++) {
                    if ( i < current ) { leftPos = slideMargin * (current - i) * (-1); }
                    else { leftPos = slideMargin * (i-current); }                                   
                    $('#slideContainer div.panel:eq(' + i + ')').animate({left: leftPos + 'px'}, 1000);
                }
                current++;            
          }
      }
      
      function slideRight() {   
            if ( current > 1 ) {
                for (var i=totalPanel; i >= 0; --i) { //start from totalPanel
                    if ( i == current-2) { leftPos = 0;  }
                    else if ( i < current - 2){ leftPos = slideMargin * (current-2 - i) * -1;  }
                    else { leftPos = slideMargin * (i - current + 2);  }                                               
                    $('#slideContainer div.panel:eq(' + i + ')').animate({left: + leftPos + 'px'}, 1000);                        
                }                        
                current--;
            }   
      }
      


//10/10/2007
//Created for Philip Morris USA site
/* 
    1 when user click on the leadership photo, display leader detail information on top, if content is
    longer than viewable space, show slider and indicator, which allows user to scroll down to view
    rest of the content.
*/

    var leader_total;
    var leader_viewHeight = 295; //viewable hieght for content
    var leader_sliderHeight = 295; //the height of leader_slider
    
    $(function() {
        leader_total = $('.leader').size();
        
        $('.go_arrow').each(function(ix) {        
            $(this).mouseover( function() { $(this).next().show(); });
            $(this).mouseout( function() { $(this).next().hide(); });        
            $(this).click( function() { displayLeaderDetail(ix+2); });              
        });
        
        $('.executive_btn').click ( function() { displayLeaderDetail(1) });
                            
        $('.leader_close').each(function(ix) {
            $(this).click( function() { $('.leaderDetail').css('display', 'none'); });        
        });
    
    });        
    
    function displayLeaderDetail(inx) {
        
        $('.leaderDetail').css('display', 'none');;
        $('#leaderDetail' + (inx)).css('display', 'block');        
        
        /** if copy is less than the showing height, hide the leader_slider */
        if ($('#leaderDetail' + (inx)).find('.leader_bio').height() < leader_viewHeight) {
            $('#leaderDetail' + (inx)).find('.leader_slider').hide();
            $('#leaderDetail' + (inx)).find('.leader_indicator').hide();
        }
        else { //set leader_indicator height 
            var leader_indicatorHeight = leader_sliderHeight * leader_viewHeight / $('#leaderDetail' + (inx)).find('.leader_bio').height();
            $('#leaderDetail' + (inx)).find('.leader_indicator').css('height', leader_indicatorHeight);  
            $('#leaderDetail' + (inx)).find('.leader_slider').show();
            $('#leaderDetail' + (inx)).find('.leader_indicator').show();
        }   
                        
        /* create leader_slider */              
        $('#leader_slider' + (inx)).Slider( 
        {
            accept :  '#leader_indicator' + (inx),
            onSlide : function( cordx, cordy ){                
               var mTop = Math.floor(($('#leaderDetail' + (inx)).find('.leader_bio').height() + 20 - leader_viewHeight) * (cordy) / 100) * -1;
               $('#leaderDetail' + (inx)).find('.leader_bio').css('margin-top', mTop);
            }
        });
              
        $('#leaderDetail' + inx).find('.prev').click( function() { (inx > 0) ? displayLeaderDetail(inx-1) : displayLeaderDetail(leader_total); });
        $('#leaderDetail' + inx).find('.next').click( function() { (inx < leader_total) ? displayLeaderDetail(inx+1) : displayLeaderDetail(0); });
    }