$(document).ready(function(){

    var zaehler = 100;
    zIndexCount = 100;
    pullLinks = $(".pullout");

    for (var i=0;i<pullLinks.length;i++){
        if (pullLinks[i].onclick == undefined){
            pullLinks[i].way = ($(pullLinks[i]).hasClass('pulloutLeft') == true) ? "left" : "right";
            pullLinks[i].opened = false;
            pullLinks[i].layer = $("#article-box-infos_"+parseInt(i+1));
            pullLinks[i].counter = i;
            pullLinks[i].onclick=function(){
                zaehler+=1;
                if(!this.opened){
                    this.parentNode.parentNode.parentNode.style.zIndex=zaehler;
                    if (this.way =="right"){
                        this.layer.animate({
                            left:"157px"
                        }, 500 );
                    }else{
                        this.layer.animate({
                            left:"-157px"
                        }, 500 );
                    }
                    this.opened = true;
                }else{
                    this.layer.animate({
                    left:"0px"
                    }, 500 );
                    this.opened = false;
                }

                for(var j=0;j<pullLinks.length;j++){
                    if (j!=this.counter){
                        if(pullLinks[j].opened){
                            pullLinks[j].layer.animate({
                                left:"0px"
                            }, 500 );
                            pullLinks[j].opened = false;
                        }
                    }
                }


                return false;
            };
        }
    }


    // 3erBox Std
    $(".articleBoxCoverMouseover").each(function(i){
        if ($(".articleBoxCoverMouseover")[i].onmouseover == undefined){
            $(this).data('opened',false);
            $(this).data('overLayer',false);
            $(this).data('overPullout',false);

            $(this).unbind("click");
            $(this).mouseenter(function(e){
                $(this).data('overPullout',true);
                zIndexCount++;
                $(document).data('activePulloutId',i);
                $(this).parents('.articleBox').css('z-index',zIndexCount);
                var $layer = $(this).parents('.articleBox').find('div.articleBoxInfos');

                $layer.data('parentPullout',$(this));
                var $dir = ($(this).find('a.pullout').hasClass('pulloutLeft') === true) ? "left" : "right";
                $layer.mouseenter(function(){
                    clearTimeout(window.timer);
                    clearTimeout(window.timer2);
                    $p = $(this).data('parentPullout');
                    $p.data('overLayer',true);
                }).mouseleave(function(){
                    var $this = $(this);
                        window.timer2 = setTimeout(function(){
                            clearTimeout(window.timer2);
                            $p = $this.data('parentPullout');
                            if ($p.data('overPullout') === false){
                                $this.animate({
                                    left:"0px"
                                }, 400 );
                                $p.data('opened',false);
                                $p.data('overLayer',false);
                                $p.data('overPullout',false);
                            }
                        },300);
                });

                if ($(this).data('opened') === false && $(this).data('overLayer') === false){
                    if ($dir == "right"){
                        $layer.animate({
                            left:"157px"
                        }, 400 );
                    }else{
                        $layer.animate({
                            left:"-157px"
                        }, 400 );
                    }
                    $(this).data('opened',true);
                }

                return false;
            }).mouseleave(function(){
                $this = $(this);
                $this.data('overPullout',false);
                    window.timer = setTimeout(function(){
                        clearTimeout(window.timer);
                        var $layer = $this.parents('.articleBox').find('div.articleBoxInfos');
                     if ($this.data('overLayer') === false){
                        $layer.animate({
                            left:"0px"
                        }, 400 );
                        $this.data('opened',false);
                }
                },300);
            });
        } // end if
    })
    // 3erBox Std Ende


    // 3erBox Lrg
    $(".articleBoxLrg .articleBoxCoverLrg").each(function(i){
        if ($(".articleBoxLrg .articleBoxCoverLrg")[i].onmouseover == undefined){
            $(this).data('opened',false);
            $(this).data('overLayer',false);
            $(this).data('overPullout',false);

            $(this).unbind("click");
            $(this).mouseenter(function(e){
                $(this).data('overPullout',true);
                zIndexCount++;
                $(document).data('activePulloutId',i);
                $(this).parents('.articleBoxLrg').css('z-index',zIndexCount);
                var $layer = $(this).parents('.articleBoxLrg').find('div.articleBoxInfos');

                $layer.data('parentPullout',$(this));
                var $dir = ($(this).parents('.articleBoxLrg').find('a.pullout').hasClass('pulloutLeft') === true) ? "left" : "right";
                $layer.mouseenter(function(){
                    clearTimeout(window.timer);
                    clearTimeout(window.timer2);
                    $p = $(this).data('parentPullout');
                    $p.data('overLayer',true);
                }).mouseleave(function(){
                    var $this = $(this);
                        window.timer2 = setTimeout(function(){
                            clearTimeout(window.timer2);
                            $p = $this.data('parentPullout');
                            if ($p.data('overPullout') === false){
                                $this.animate({
                                    left:"0px"
                                }, 400 );
                                $p.data('opened',false);
                                $p.data('overLayer',false);
                                $p.data('overPullout',false);
                            }
                        },300);
                });

                if ($(this).data('opened') === false && $(this).data('overLayer') === false){
                    if ($dir == "right"){
                        $layer.animate({
                            left:"230px"
                        }, 400 );
                    }else{
                        $layer.animate({
                            left:"-230px"
                        }, 400 );
                    }
                    $(this).data('opened',true);
                }

                return false;
            }).mouseleave(function(){
                $this = $(this);
                $this.data('overPullout',false);
                    window.timer = setTimeout(function(){
                        clearTimeout(window.timer);
                        var $layer = $this.parents('.articleBoxLrg').find('div.articleBoxInfos');
                     if ($this.data('overLayer') === false){
                        $layer.animate({
                            left:"0px"
                        }, 400 );
                        $this.data('opened',false);
                }
                },300);
            });
        } // end if
    })
    // 3erBox Lrg Ende

});