/* Config Variables */
  var subnavWorkId = "subnav_work";
  var divId = "slide_wrapper";
  var slide_easing = "easeOutExpo";
    
  /* Timer Settings */
  var timerInterval = 100;
  var timerID = -1;
  var speed = 1000;
    
  /* Do not modify */
  var clientData = null;
  var currentClientIndex = 0;
  var currentClientIndexLoader=0;
  var currentImageIndex = 0; 
  var currentImageIndexLoader=0;
  var pass=0;  
    
       
  function incrementImage(){
           
    currentImageIndexLoader++;
         
    if (currentImageIndexLoader==clientData[currentClientIndexLoader].images.length){
        currentClientIndexLoader++;
        currentImageIndexLoader=0;
        if (currentClientIndexLoader == clientData.length){
            currentClientIndexLoader=0;
        }
    }
  }
       

       
       
       function nextSlideIsLoaded(){
       
      
         tmpClient=currentClientIndex;
         tmpImg=currentImageIndex;
          
         tmpImg++;
         
         if (tmpImg==clientData[tmpClient].images.length){
          
           tmpClient++;
           tmpImg=0;
           if (tmpClient == clientData.length){
             tmpClient=0;
           }
         }

     
         if (clientData[tmpClient].images[tmpImg].loaded==true) 
           return true;
         return false;
         
       }
       
       function getNextSlideId(){
       
         tmpClient=currentClientIndex;
         tmpImg=currentImageIndex;
          
         tmpImg++;
         
         if (tmpImg==clientData[tmpClient].images.length){
          
           tmpClient++;
           tmpImg=0;
           if (tmpClient == clientData.length){
             tmpClient=0;
           }
         }
         
         return("slider_"+tmpClient+"_"+tmpImg)
         
       }
       
       
       function getPrevSlideId(){
        
         tmpClient=currentClientIndex;
         tmpImg=currentImageIndex;
          
         tmpImg--;
         
         if (tmpImg < 0){
          
           tmpClient--;
           
           if (tmpClient < 0 ){
             tmpClient=clientData.length -1; 
           }
           tmpImg=clientData[tmpClient].images.length-1;
            
         }
    
         return("slider_"+tmpClient+"_"+tmpImg)
         
       }
       
       
       
       function prevSlideIsLoaded(){
       
       //alert("current Client: " + currentClientIndex + " " + currentClientIndex)
         tmpClient=currentClientIndex;
         tmpImg=currentImageIndex;
          
         tmpImg--;
         
         if (tmpImg < 0){
           tmpClient--;
           
           if (tmpClient < 0){
             tmpClient=clientData.length-1;
             
           }
           tmpImg=clientData[tmpClient].images.length-1;
         }
         
         //console.log('prev slide loaded:(' + tmpClient +"/" +tmpImg + ") " +clientData[tmpClient].images[tmpImg].loaded)
         //console.log( clientData[tmpClient].images[tmpImg] );
         if (clientData[tmpClient].images[tmpImg].loaded==true) 
           return true;
         return false;
         
       }
       
       
       
      
   
       function imageLoader2(){
       
         if (allSlidesLoaded() ) {
           clearInterval(timerID); 
           timerID = -1;
           resetSlides();
           //$('#loader').css('visibility','hidden');
           
            $("#footer").removeClass("loader");
         	$("ul.pager").show();
         
           setPageTitle(clientData[currentClientIndex].page_title);
           setSlideTitle(clientData[currentClientIndex].images[currentImageIndex].description);
           return;}
       
         images=clientData[currentClientIndexLoader].images;
         client=clientData[currentClientIndexLoader];
           
         log('\n\n\nPass:' + pass + ' >>>> ' + currentClientIndexLoader + '/' + currentImageIndexLoader + '/' + images.length);
         pass++;
       

         // see if this image exists and is complete
         wrapper_exists=    $("#slider_" + currentClientIndexLoader + "_" + currentImageIndexLoader).length > 0 ? true: false;
         image_loaded = $("#" + "image_" + currentClientIndexLoader + "_" + currentImageIndexLoader).length > 0 && document.getElementById("image_" + currentClientIndexLoader + "_" + currentImageIndexLoader).complete == true  ? true : false

        
        
         if (  wrapper_exists &&  (  image_loaded || clientData[currentClientIndexLoader].images[currentImageIndexLoader].type=='project') ){     
              
              clientData[currentClientIndexLoader].images[currentImageIndexLoader].loaded=true;
            
               // See if the next slide is loaded
                if (nextSlideIsLoaded()){
                  $("#next").css("visibility","visible");
                }else{
                  $("#next").css("visibility","hidden");
                }

               // See the if previous slide has loaded
               if (prevSlideIsLoaded()){
                  $("#prev").css("visibility","visible");
               }else{
                  $("#prev").css("visibility","hidden");
               }
                
              // update the slide count
              if (currentClientIndex==currentClientIndexLoader){
                 $("#total_slides").html(currentImageIndexLoader+1)
              }
             
             // if this is the first slide, then show it
             firstSlide =  $("#slide_wrapper").children(".slide").length == 1 ? true : false;
             if (firstSlide){             
              $("#slider_" + currentClientIndexLoader + '_' + currentImageIndexLoader).css('left','0px').css('top','0px').fadeIn('slow');
             }
              
              // go to the next image
              incrementImage(); 
              images = clientData[currentClientIndexLoader].images;
              
               

         }
         
         // see if the image exists and in not complete
         if ( $("#slider_" + currentClientIndexLoader + "_" + currentImageIndexLoader).length == 0 ){  
          
        
        
              // set the id and class of the new div
              divId="slider_" + currentClientIndexLoader + "_" + currentImageIndexLoader;
              divClass = $("#slide_wrapper").html() == '' ? 'slide' : 'slide';
              
    
              //photo vs project
              if (clientData[currentClientIndexLoader].images[currentImageIndexLoader].type=='photo'){
                
	                imageId="image_" + currentClientIndexLoader + "_" + currentImageIndexLoader;
	                imageSrc=clientData[currentClientIndexLoader].images[currentImageIndexLoader].url;
	                $("#slide_wrapper").append("<div style='top:-2000px;left:0px;' class='" + divClass + "' id='" + divId + "'><img src='" + imageSrc + "' id='" + imageId + "' /></div>" )  
                 
              }else{
              
               divSliderId = "project_slide_" + currentClientIndexLoader + "_" + currentImageIndexLoader;
               divSliderH1Id = "project_slide_header_" + currentClientIndexLoader + "_" + currentImageIndexLoader;
               i=currentImageIndexLoader;               
               
              // Fix colors without a #
               if (images[i].project_slide_background_color.indexOf('#') == -1){
                   images[i].project_slide_background_color='#'+images[i].project_slide_background_color;
               }
           
               if (images[i].project_slide_title_color.indexOf('#') == -1){
                  images[i].project_slide_title_color='#'+images[i].project_slide_title_color;
               }
          
                   
               html='<div style="top:-2000px;left:0px;" class="'+ divClass +'" id="'+ divId +'">';
               html+='<div style="background-color: ' + images[i].project_slide_background_color + '"  id="' + divSliderId + '">';
               html+='<h1 style="visibility:hidden" class="hdr_organic-sifr" id="' + divSliderH1Id + '">'+ images[i].project_slide_intro_title +'</h1>';
               html+='<h2 style="color:'+ images[i].project_slide_title_color +'">'+images[i].project_slide_title+'</h2>';
               html+='<p style="color:white">'+images[i].project_slide_copy+'</p>';
               html+='</div></div>';
               
               $("#slide_wrapper").append(html);
           
               if(typeof sIFR == "function"){
                 sIFR.replaceElement(named({sSelector:"#"+divSliderH1Id, sFlashSrc:"/fl/din.swf", sColor:"#FFFFFF", sLinkColor:"#000000", sBgColor:images[i].project_slide_background_color, sHoverColor:"#CCCCCC", nPaddingTop:0, nPaddingBottom:0/*, sFlashVars:"textalign=center&offsetTop=6"*/}));
               };
           
            
               $("#" + divSliderId).css({display:"block"})
               $("#" + divSliderId).css({});
               $("#" + divSliderId).css({visibility:'visible'});
               
              
              
              }
              log('completed project: slider_' + currentClientIndexLoader + '_' + currentImageIndexLoader)
              
             
         }
      }
       
       
       function initClientSlides(){
         
         currentClientIndexLoader=currentClientIndex;
         currentImageIndexLoader=currentImageIndex;

         for (i=0;i<clientData.length;i++){
           for (j=0;j<clientData[i].images.length;j++){
             clientData[i].images[j].loaded=false;
           }
         }
          
       }
       
       
       function allSlidesLoaded(){
       
         allComplete = true;

         for (i=0;i<clientData.length;i++){      
           for (j=0;j<clientData[i].images.length;j++){    
             if ( clientData[i].images[j].loaded == undefined || 
                  clientData[i].images[j].loaded == false ){
                  return(false)              
             }          
           }         
         }

         return true;
       
       }
       
    function loadWorkSlides(client_id){
	  //ADD LOADER CLASS
	  $('#loader').css('visibility','hidden');
      $("#footer").addClass("loader");
      $("ul.pager").hide();
         
      /* Load the clients data */
      jQuery.getJSON('/cms/slides_json/' + client_id,{},
        function(clients){
          clientData=clients;
          currentClientIndex=client_id
          if( client_id == 0 ){ setList(); }
          $("#client_" + client_id).addClass('active');
      
      }                  
    );   
}

  
    
    /**
      * Move the images div to the left / next
      *
     **/
    $("#next").click(function(){
    
      // get the next slides data
      currentSlideName="slider_" + currentClientIndex + "_" + currentImageIndex;
      nextSlideName=getNextSlideId();
      
      // increment
      currentImageIndex++;
      if (currentImageIndex == clientData[currentClientIndex].images.length){
      
        currentImageIndex=0;
        currentClientIndex++;
        
        if (currentClientIndex==clientData.length){
          currentClientIndex=0;
          currentImageIndex=0;
        }
      
      }

      // updated the slide indicator           
      $("#count").text(parseInt(1+currentImageIndex));
      $("#total_slides").text(clientData[currentClientIndex].images.length)
        
      // update sub nav
      $(".subnav li").removeClass("active");
      $("#a_"+parseInt(currentClientIndex)).parents("li").addClass("active");
      
  
      $("#"+currentSlideName).removeClass("viewing");
      
      if (currentImageIndex==0){
        $("#"+currentSlideName).css('display','none').css('left','870px').css('display','block');
        $("#" +nextSlideName).css('display','none')
                             .css('left','0px').fadeIn('show')
                             .css('display','block')
                             .addClass('viewing'); 
      
      }else{
        // Animate
        $("#"+currentSlideName).animate({"left": "-870px"}, speed, slide_easing)
                               .animate({"top": "-500px"}, 1)
                               .animate({"left": "0px"}, 1);
                               
        $("#"+currentSlideName).removeClass("viewing");
        $("#" +nextSlideName).animate({"left": "0px"}, speed, slide_easing).addClass("viewing")

                             
     
      }
      
      resetSlides();

      // Display the desc
      setSlideTitle(clientData[currentClientIndex].images[currentImageIndex].description);
      setPageTitle(clientData[currentClientIndex].page_title);

    });

    function setPageTitle(title){
      document.title=title; 
    }

        
    function resetSlides(){
           
     $("#"+getNextSlideId()).animate({"left": "870px","top":"0px"}, 1)
     $("#"+getPrevSlideId()).animate({"left": "-870px","top":"0px"}, 1)

    }
    
    /**
      * Move the images div to the right / prev
      *
     **/
    
    $("#prev").click(function(){
    
      // get the next slides data
      currentSlideName="slider_" + currentClientIndex + "_" + currentImageIndex;
      prevSlideName=getPrevSlideId();
      
      // decrement
      currentImageIndex--;
      if (currentImageIndex < 0 ){
      
        currentClientIndex--;       
        
        if (currentClientIndex < 0){
          currentClientIndex=clientData.length - 1;
        }
        
        currentImageIndex=clientData[currentClientIndex].images.length-1;
         
      
      }
         
      // updated the slide indicator           
      $("#count").text(parseInt(1+currentImageIndex));
      $("#total_slides").text(clientData[currentClientIndex].images.length)
        
      // update sub nav
      $(".subnav li").removeClass("active");
      $("#a_"+parseInt(currentClientIndex)).parents("li").addClass("active");
     
      if (currentImageIndex == clientData[currentClientIndex].images.length-1){
      //alert(prevSlideName = " " + nextSlideName + ' test');
        $("#"+currentSlideName).css('display','none')
                               .css('top','-2000px')
                               .css('left','0px')
                               .removeClass('viewing');
        $("#" +prevSlideName).css('display','none')
                             .css('top','0px')
                             .css('left','0px');   
        $('#'+prevSlideName).fadeIn('slow')
                            .addClass('viewing');
      }else{
        // Animate
        $("#"+currentSlideName).animate({"left": "870px"}, speed, slide_easing)
                               .animate({"top": "-500px"}, 1)
                               .animate({"left": "0px"}, 1)
                               .removeClass('viewing');
        $("#" +prevSlideName).animate({"left": "0px"}, speed, slide_easing)
                             .addClass('viewing');
      }

      //$('#'+currentSlideName).fade('show')
      resetSlides();
         
      // Display the desc
      setSlideTitle(clientData[currentClientIndex].images[currentImageIndex].description);
      setPageTitle(clientData[currentClientIndex].page_title);
       
    });
    
    
    function setList(){
   
      // Check for a null clientData     
      if (clientData == null) return;
      
      col = 0;
      
      // add li's to the list 
      for (i=0;i<clientData.length;i++){
              
        if ( i % 4 == 0 ){    
          tmpUl = document.createElement("ul");
          //tmpUl.setAttribute("class","nav"); can not setAttribute of class in IE5/6/7.
          elemClass = document.createAttribute("class");
          elemClass.nodeValue="nav";
          tmpUl.setAttributeNode(elemClass);
          tmpUl.setAttribute("id","menuList_" + col);
        
          // add to the menu system
          $("#" + subnavWorkId).append(tmpUl);
          col++;
        }

        // create and li and the text
        tmpLiObj = document.createElement('li');
        tmpLiObj.id ='client_'+i;
        tmpAObj = document.createElement('a');
        tmpAObj.setAttribute("id","a_"+i);
        tmpAObj.setAttribute("href","javascript:void("+i+")");
        tmpTextObj = document.createTextNode(clientData[i].client_name);

        // add the text and li to the menu
        tmpLiObj.appendChild(tmpAObj);
        tmpAObj.appendChild(tmpTextObj);
        $("#menuList_" + parseInt(col - 1)).append(tmpLiObj);     

      }
       
        $(".nav li a").click(function() {
          var aIndex = $(this).attr("id").split("_")[1];
          changeClient(aIndex);  
        });
        
     
      // Start the timer to serially load the images
      initClientSlides();
      timerID = setInterval("imageLoader2()",timerInterval);

    }


    function setSlideTitle(text){
    
      $("#footer .title").html(text);
    
    }

    function changeClient(index, client_id){

      // If this is the current customer, then do nothing
      if (index == currentClientIndex){
        return;
      }
      
      
      // If the loader is already running, then do nothing
      
      if (timerID != -1){
        log("busy");
        return;
      }
      
      $("#subnav_work li").removeClass('active');
      $("#client_"+index).addClass('active');
      
      // get the next slides data
      oldSlideName="slider_" + currentClientIndex + "_" + currentImageIndex;
      nextSlideName=getNextSlideId();
      
      // update the clients
      currentClientIndex = index;
      newSlideName="slider_" + currentClientIndex + "_" + currentImageIndex;
      currentImageIndex=0;
      resetSlides();


      // Display the images    
      $("#"+oldSlideName).css('display','none').css('left','870px');
      $("#" +newSlideName).css('display','none').css('top','0px').css('left','0px').fadeIn('slow'); 
      
      // Set the title
      setPageTitle(clientData[currentClientIndex].page_title);

    }