(function($){

   $.fn.ooBox = function(optionen){

    optionen = $.extend({
     width: "640px",
     height:"480px",
     type: "image", //roadtrip, iframe, xml, flash
     auto: "on",
     sx:"",
     sy:"",
     text:""
    }, optionen);
    
    

      
      var posX, posY, url;
      var ooBoxShade, ooBoxIframe, ooBoxController, ooBoxContent;
    
      var length = this.length;
      var imagearray =  new Array();

      var slideShow;
      
      

      
      
     
      var tmp = this;
      
      var ii = 0;
      while(tmp[ii]){
        imagearray[ii] = new Object();
        imagearray[ii]['src'] = $(tmp[ii]).attr('href');
        ii++;
      }
      
      
      
     
     
     $(this).each(function(i){
       
       var self  = this;
       
       
       $(this).click(function(e){
         if(optionen.sx != "" || optionen.sy != "") {
           posX = optionen.sx;
           posY = optionen.sy;
         }else {
           posX = e.pageX;
           posY = e.pageY;
         }

         url = $(this).attr('href');
         $(this).attr('href','javascript:void(0);');
          
         if(optionen.type == "iframe"){iframe();}
         if(optionen.type == "image"){image();}
         if(optionen.type == "roadtrip"){
             roadtrip(i);
            if(optionen.auto == "on") {
              slideShow = window.setTimeout(function(){next(self);},5000);
            }
         }

         
         
         open(self);
         
          
       });
       
       
     });
     
     
     function roadtrip(i){
         ooBoxShade      = '<div id="ooBoxShade" style="height:100%;width:100%;background-color:#000;position:fixed;top:0px;left:0px;z-index:999;"></div>'
         ooBoxIframe     = '<img id="ooBoxIframe" src="'+url+'" alt="" style="visibility:hidden;" />';
         ooBoxController = '<div id="ooBoxController" style="height:20px;margin:0px;position:relative;"><a href="javascript:void(0);" id="ooBoxPrev">&lt;&lt;</a><a href="javascript:void(0);" id="stopplay">stop</a><a href="javascript:void(0);" id="ooBoxNext">&gt;&gt;</a> - <span id="ooBoxNr">'+(i+1)+'</span> von '+length+'<a href="javascript:void(0);" id="ooBoxButtonClose" style="position:absolute;right:0px;">schliessen/close</a></div>';
         ooBoxContent    = '<div id="ooBoxContent" style="height:0px;width:0px;margin-left:0px;margin-top:0px;background-color:#fff;position:fixed;top:'+posY+'px;left:'+posX+'px;z-index:999;">'+ooBoxIframe+ooBoxController+'</div>';
     }


     
     function image(){
         ooBoxShade      = '<div id="ooBoxShade" style="height:100%;width:100%;background-color:#000;position:fixed;top:0px;left:0px;z-index:999;"></div>'
         ooBoxIframe     = '<img id="ooBoxIframe" src="'+url+'" alt="" style="visibility:hidden;" />';
         ooBoxController = '<div id="ooBoxController" style="height:20px;margin:0px;position:relative;"><a href="javascript:void(0);" id="ooBoxButtonClose" style="position:absolute;right:0px;">schliessen</a></div>';
         ooBoxContent    = '<div id="ooBoxContent" style="height:0px;width:0px;margin-left:0px;margin-top:0px;background-color:#fff;position:fixed;top:'+posY+'px;left:'+posX+'px;z-index:999;">'+ooBoxIframe+ooBoxController+'</div>';
     }
     
     
     
     
      function iframe() {
         ooBoxShade      = '<div id="ooBoxShade" style="height:100%;width:100%;background-color:#000;position:absolute;top:0px;left:0px;z-index:999;"></div>'
         ooBoxIframe     = '<p id="ooBoxText" style="padding:10px;text-align:center;display:none;">'+optionen.text+'</p><iframe id="ooBoxIframe" style="display:none;width:100%;height:'+ (parseInt(optionen.height) - 50 )+'px;margin:0px;" src="" frameborder="0"></iframe>';
         ooBoxController = '<div id="ooBoxController" style="display:none;height:20px;margin:0px;position:relative;"><a href="javascript:void(0);" id="ooBoxButtonClose" style="position:absolute;right:0px;">schliessen</a></div>';
         ooBoxContent    = '<div id="ooBoxContent" style="height:0px;width:0px;margin-left:0px;margin-top:0px;background-color:#fff;position:absolute;top:'+posY+'px;left:'+posX+'px;z-index:999;">'+ooBoxIframe+ooBoxController+'</div>';
      }
            
            
            
            
            
       function open(self){ // offnet die onlineoffbox
          $('body').append(ooBoxShade);
          $('#ooBoxShade').css('opacity', 0);
          $('#ooBoxShade').fadeTo("slow", 0.5, function(){
            $('body').append(ooBoxContent);
             $("#ooBoxContent").animate({ 
               width: "220px",
               height: "19px",
               left: "50%",
               top: "50%",
               marginLeft:(-110),
               marginTop:(-10)
             }, 1000,function(){
               $('#ooBoxIframe').attr('src',url);
               $('#ooBoxIframe').load(function() {
                   if(optionen.type=="image" || optionen.type == "roadtrip") {
                    optionen.height = parseInt($("#ooBoxIframe").height()) + 20;
                    optionen.width = $("#ooBoxIframe").width();
                   }
                   $("#ooBoxContent").css("background-image","url('')");
                   $("#ooBoxContent").animate({ 
                      width: optionen.width,
                      height: optionen.height,
                      marginLeft:((parseInt(optionen.width) / 2) * -1),
                      marginTop:((parseInt(optionen.height) / 2) * -1)
                   }, 1000,function(){
                      if(optionen.type == "image" || optionen.type == "roadtrip") {
                         $("#ooBoxIframe").css('display','none');
                         $("#ooBoxIframe").css('visibility','visible');
                      }
                      $("#ooBoxIframe").fadeIn();
                      $("#ooBoxController").fadeIn();
                      $("#ooBoxText").fadeIn();
                   });
               });
               $('#stopplay').click(function(){stop(self);});
               $('#ooBoxPrev').click(function(){prev(self);});
               $('#ooBoxNext').click(function(){next(self);});
               $('#ooBoxButtonClose').click(function(){close(self);});
               $('#ooBoxShade').click(function(){close(self);});
             });
          });
       }
       
       

       
       
       
       function close(self){ // beendet die onlineoffbox
          window.clearTimeout(slideShow);
          $(self).attr('href',url);
          $("#ooBoxIframe").fadeOut();
          $("#ooBoxController").fadeOut();
          $("#ooBoxText").fadeOut();
          $("#ooBoxContent").animate({ 
            width: "220px",
            height: "20px",
            marginLeft:"-110px",
            marginTop:"-10px"
          }, 1000,function(){
            $("#ooBoxContent").animate({ 
              width: "0px",
              height: "0px",
              left: posX,
              top: posY,
              marginLeft:"0px",
              marginTop:"0px"
            }, 1000,function(){
            $("#ooBoxContent").remove();
              $('#ooBoxShade').fadeTo("slow", 0.0, function(){
                $("#ooBoxShade").remove();
              });
            });
          });
       }
       
       
       
       function next(self){
         window.clearTimeout(slideShow);
         $("#ooBoxIframe").fadeOut();
         $("#ooBoxController").fadeOut();
            $("#ooBoxContent").animate({ 
              width: "220px",
              height: "20px",
              marginLeft:"-110px",
              marginTop:"-10px"
            }, 1000,function(){
               var nr = (parseInt($("#ooBoxNr").html()));
               if(nr == length){nr = 0;}
               var src = imagearray[nr]['src'];
               $("#ooBoxIframe").attr('src', src);
               if(nr < length){nr++;}
               $("#ooBoxNr").html(nr);
               if(optionen.auto == "on") {
                 slideShow = window.setTimeout(function(){next(self);},5000);
               }
            });
       }
       

       
       
       function prev(self){
         $("#ooBoxIframe").fadeOut();
         $("#ooBoxController").fadeOut();
            $("#ooBoxContent").animate({ 
              width: "220px",
              height: "20px",
              marginLeft:"-110px",
              marginTop:"-10px"
            }, 1000,function(){
               var nr = (parseInt($("#ooBoxNr").html()));
               nr = nr - 2;
               if(nr <= 0){nr = length - 1;}
               var src = imagearray[nr]['src'];
               $("#ooBoxIframe").attr('src', src);
               nr++;
               $("#ooBoxNr").html(nr);
            });
       }
       

       function stop(self){
         window.clearTimeout(slideShow);
         $("#stopplay").html("play");
         $("#stopplay").click(function(){
          play(self);
         });
       }
       
       
       function play(self){
         slideShow = window.setTimeout(function(){next(self);},5000);
         $("#stopplay").html("stop");
         $("#stopplay").click(function(){
          stop(self);
         });
       }
    
    
   }

})(jQuery);