var firstTime = true;


jQuery(document).ready(function(){
  
  
  makeTheJson();
  greatProject.init();
                  
  /*
          jQuery(".project").hover(
            function(){
              src =  jQuery(this).find("img").attr("src").replace("projekt","projektbunt");
              jQuery(this).find("img").attr("src", src);
              jQuery(this).find("img").css("opacity","1");
            },
            function(){
              src =  jQuery(this).find("img").attr("src").replace("projektbunt","projekt");
              jQuery(this).find("img").attr("src", src);
              jQuery(this).find("img").css("opacity","0.6");
            });
            */
/*            
            if($(window).height() < 590){
              $("#left-col").css("position","static");
            }else{
              $("#left-col").css("position","fixed");    
            }
*/   
  
  });        
greatProject = {
  init: function(){          
    jQuery(".project img").unbind("click");    
    jQuery(".project img").click(function(){

      jQuery(".project").unbind('mouseenter mouseleave')
      jQuery(".project img").css("opacity","1");
      currentIndex = $(".project img").index(this);
      oldProject = jQuery(".project").eq(currentIndex).clone();
      jQuery(".project").eq(currentIndex).wrap("<div id='project-stage'></div>");


      jQuery("#right-col").append("<a href='' title='nächstes Projekt' id='arrow-right'></a>");
      jQuery("#right-col").append("<a href='' title='letztes Projekt' id='arrow-left'></a>");    

      jQuery(".project img").css("opcacity",1);
      oldProject.insertBefore("#project-stage");  
      $("#project-stage").prepend("<a href=# id=backToStart>Zurück zur Übersicht</a>");

      $("#backToStart").click(function(){
        $("#project-stage").remove();
        $("#arrow-left").remove();      
        $("#arrow-right").remove(); 
        $("#backToStart").remove();
        greatProject.init();                     
        $(".project").fadeIn();
        return false;
      });
      imgSrc = "/index.php?rex_img_type=projekt_gross&rex_img_file=" + $(this).attr("id") + "&time=" + new Date().getTime();
      bigImage = $("<img>").attr("src",imgSrc);


      jQuery(".project").not("#project-stage .project").hide();

      $("#project-stage").append("<img src=/loader.gif id=loader>")
      $("#loader").css({
        "position":"absolute",
        "top":"128px",       
        "left":"88px"
      });


          bigImage.load(function(){
            $("#loader").remove();

            jQuery("#project-stage .project .text").css({"position":"static","width":"450px","display":"block"}); 
            jQuery("#project-stage img").unbind("click");
            jQuery("#arrow-right").unbind("click");        
            jQuery("#arrow-left").unbind("click");                
            
            jQuery("#arrow-right").click(function(){
              greatProject.nextProject();      
              return false;
            });

            jQuery("#arrow-left").click(function(){
              greatProject.prevProject();      
              return false;
            });

            tempImg = new Image();
            tempImg.src = imgSrc;
            if(tempImg.width > tempImg.height || tempImg.width > 430){
                css = {"width":"430px"}                                               
                if(tempImg.height >= 299){
                css = {"height":"299px"}                                                 
                }               
            }else{
              css = {"height":"299px"}                                                               
            }


            jQuery("#project-stage .project .image").animate({"width":"430px","height":"300px"},500,function(){
              jQuery("#project-stage .project .image img").animate(css,400,function(){
                  jQuery("#project-stage .project .image img").css("cursor","auto");
                  jQuery("#project-stage .project .image img").attr("src",bigImage.attr("src"));              



                  if(currentIndex != 0){
                    $("#arrow-left").fadeIn();                
                  }    

                  $("#arrow-right").fadeIn();                              

                  $("#project-stage .project .image").css({"height":"auto"});
              });            
            });
    });
    }); 
    
  },
  nextProject: function(){

    $("#arrow-right").unbind("click");
    $("#arrow-right").bind("click",function(){return false});    
        
     var newProject = $("#project-stage .project").clone();      
     
     $("#project-stage .project .image").css("height","auto");
     jQuery("#project-stage img").unbind("click");
     
     newItem = databaseJson[currentIndex+1];                                                                    

     newProjectImage = $("<img>").attr("src","/index.php?rex_img_type=projekt_gross&rex_img_file=" + newItem.imageID + "&" + new Date().getTime())

     $("#project-stage").append("<img src=/loader.gif id=loader>")
     $("#loader").css({
       "position":"absolute",
       "top": $("#project-stage img").offset().top + 12 + "px",
       "left":"213px"
     });

     
     $(newProjectImage).load(function(){        

       $("#loader").remove();

       css = {
         "width":"auto",
         "height":"auto"
       }     
       
       
       $("#project-stage").append($("#project-stage .project").clone());
       $("#project-stage .project").eq(1).find("img").css(css);  
       
       $("#project-stage .project").eq(1).css("left","450px");

       $("#project-stage .project").eq(1).find("h2").html(newItem.projectName);
       $("#project-stage .project").eq(1).find("h3").html(newItem.projectDescription);       

       $("#project-stage .project").eq(1).find(".text").html(newItem.text);       
       $("#project-stage .project").eq(1).find("p.date").html(newItem.date);
       $("#project-stage .project").eq(1).find("img").attr("src",$(newProjectImage).attr("src"));
       $("#project-stage .project").eq(1).animate({"left":"0px"},250);     

       $("#project-stage .project").eq(0).animate({"left":"-450px"},250,function(){
         $("#project-stage .project").eq(0).remove();
         jQuery("#arrow-right").click(function(){
           greatProject.nextProject();      
           return false;
         });         
       });       
       
       
     }).error(function(){

     });

     currentIndex++;        

     if(currentIndex <= 0){
       $("#arrow-left").hide();
     }else{
       $("#arrow-left").show();        
     }                   

     if(currentIndex >= $(databaseJson).length-1){
       $("#arrow-right").hide();
     }else{
       $("#arrow-right").show();        
     }  
     
  },
  prevProject: function(){

    $("#arrow-left").unbind("click");
    $("#arrow-left").bind("click",function(){
      return false;
      });    
        
     var newProject = $("#project-stage .project").clone();      
     
     $("#project-stage .project .image").css("height","auto");
     jQuery("#project-stage img").unbind("click");
     
     newItem = databaseJson[currentIndex-1];                                                                    
     
     newProjectImageLeft = $("<img>").attr("src","/index.php?rex_img_type=projekt_gross&rex_img_file=" + newItem.imageID + "&date=" + new Date().getTime())
     $("#project-stage").append("<img src=/loader.gif id=loader>")
     $("#loader").css({
       "position":"absolute",
       "top": $("#project-stage img").offset().top + 12 + "px",
       "left":"213px"
     });
     
     
     
     $(newProjectImageLeft).load(function(){        
     $("#loader").remove();
       css = {
         "width":"auto",
         "height":"auto"
       }

       
       $("#project-stage").append($("#project-stage .project").clone());
       $("#project-stage .project").eq(1).find("img").css(css);  
       
       $("#project-stage .project").eq(1).css("left","-450px");

       $("#project-stage .project").eq(1).find("h2").html(newItem.projectName);
       $("#project-stage .project").eq(1).find("h3").html(newItem.projectDescription);       

       $("#project-stage .project").eq(1).find(".text").html(newItem.text);       
       $("#project-stage .project").eq(1).find("p.date").html(newItem.date);
       $("#project-stage .project").eq(1).find("img").attr("src",newProjectImageLeft.attr("src"));
       $("#project-stage .project").eq(1).animate({"left":"0px"},250);     

       $("#project-stage .project").eq(0).animate({"left":"450px"},250,function(){
         $("#project-stage .project").eq(0).remove();
         jQuery("#arrow-left").click(function(){
           greatProject.prevProject();      
           return false;
         });         
       });       
       
     currentIndex--;          

     if(currentIndex <= 0){
       $("#arrow-left").hide();
     }else{
       $("#arrow-left").show();        
     }                   
       $("#arrow-right").show();        


     }).error(function(){

     });
     }


}    

function makeTheJson(){
 databaseJson = []; 
  $(".project").each(function(index,element){

   jsonItem = {
     date: $(element).find(".date").html(),
     imageID: $(element).find("img").attr("id"),
     text: $(element).find(".text").html(),
     projectName: $(element).find("h2").html(),
     projectDescription: $(element).find("h3").html()     
   }                                             
   
   databaseJson.push(jsonItem);
  });
}