﻿/*
This contains all the functions for the home page
*/




function eventRsvp(response, btn){
    btn = $(btn);
    btn.parent().parent().find('LI').each(function(){
        var theA = $(this).find('a');
        theA.removeClass('selected');
        if(theA.hasClass(response)){
            theA.addClass('selected');
        }
    });
}
function showNews(obj){
    var fp = new FadePreview(obj, 'news', ['div.news>a:last']);
    fp.afterFade = function(obj){//This is after it is isolated
        var aniTime = 500;
        obj.css({
            zIndex:parseInt(obj[0].style.zIndex+5)
        });
        var commentDiv = obj.find('DIV.comments');
        commentDiv.css({
            height:0,
            overflow:"hidden",
            display:"block"
        }).animate({
            height:commentDiv[0].scrollHeight
        }, aniTime, function(){
            this.style.height = "auto";
        });
        $('<div id="theBlackDiv"></div>').css({
            backgroundColor:"black",
            width:0,
            height:obj.height() + commentDiv[0].scrollHeight,
            position:"absolute",
            top:obj.offset().top + obj.find('h1:first').height()+3,
            right:0,
            zIndex:parseInt(obj[0].style.zIndex-1)
        }).appendTo(document.body).animate({
            width:"100%"
        }, aniTime);

        //Change news comments action
        obj.find('DIV.comments FORM').submit(function(){
            $('div#theBlackDiv').css({
                height:obj.height()
            })
            return false;
        });
    };
    fp.extraRemove = function(obj){
        //I also have to copy the comments 
        //to the orignal comments thing
        $('BODY>DIV#holder>DIV.content>DIV.news DIV.comments')
            .html(obj.find('DIV.news DIV.comments').html());
    };
    fp.init();
}

function showEvent(obj){
    var fp = new FadePreview(obj, 'event', 
            ['div.event>a.seemore', 'div.event>a.clickme']);
    fp.afterFade = function(obj){//This is after it is isolated
        var aniTime = 300;
        var grow = obj.find('p, a.realpage, div.rsvp');
        
        obj.find('div.event').css({
            marginBottom:0
        });
        obj.animate({
            //left:"110px"
        }, aniTime);
        $(grow).each(function(){
            $(this).animate({
                height:this.scrollHeight,
                padding:"1em"
            }, aniTime, function(){
                $(this).css({
                    overflow:"visible",
                    height:"auto"
                });
                //loadEvents(obj);
            });
        });
    };
    fp.extraRemove = function(obj){
        //Keep the class="selected" on the right one...
        //that means I'm just going to copy the ul.horizontal

        $('BODY>DIV#holder>DIV.content>DIV.event UL.horizontal')
            .html(obj.find('UL.horizontal').html());
    }
    fp.init();
}
    function loadEvents(obj){
            /*
            week calendar for the current week.
            you can advance weeks and change to month view(you can change months too, why not.
            */
            var weekCal = $('<div></div>').css({
                position:"fixed",
                bottom:0,
                left:0,
                width:"auto",
                height:0,
                backgroundColor:"transparent",
            }).appendTo(document.body);
            weekCal[0].originalZ = obj[0].style.zIndex - 5;
            weekCal.css({
                zIndex:weekCal[0].originalZ
            });

            weekCal = new SuperCalendar(weekCal);

            weekCal.init();

            weekCal = $(weekCal).css({
                color:"black"
            });
            weekCal.css({
                backgroundColor:"white",
                borderRight:"2px solid black"
            });
            obj.hover(function(){
                $(this).css({
                    zIndex:this.originalZ+10
                });
                weekCal.css({
                    zIndex:weekCal[0].originalZ
                })
            }, function(){
            });
            obj[0].originalZ = obj[0].style.zIndex;
            weekCal[0].afterMonthAni = function(){
                $(this).css({
                    zIndex:this.originalZ+10
                });
                obj.css({
                    zIndex:obj[0].originalZ
                })
            }
            weekCal.hover(function(){
                $(this).css({
                    zIndex:this.originalZ+10
                });
                obj.css({
                    zIndex:obj[0].originalZ
                })
            }, function(){
            });
            weekCal.animate({
                height:"100%"
                }, 200, function(){
                    if(window.FadePreviewObj.dead == 1){
                        $(this).remove();
                    }
                });
        }


function FadePreview(obj, type, remove){
    //There can only be one at a time...
    if (window.FadePreviewObj){
        window.FadePreviewObj.die();
    }
    var me = window.FadePreviewObj = this;
        me.zindex = 5000;
    var objCopy = $(obj).clone(true); //This will be used most of the time...

    me.whiteDiv;
    me.afterFade = function(objC){};
    me.extraRemove = function(){};
    me.dead = 0;

    me.init = function(){
        me.dead = 0;
        objCopy = me.setUpObj(objCopy, me.extraRemove);
        //fade everything to white except the obj copy

        me.fadeAway(function(){
            $(objCopy).find('object, embed').css({
                visibility:"visible"
            });
            $('html, body').animate({
                scrollTop:objCopy.offset().top -50
            }, 500);
            objCopy.css({
                height:"auto"
            });

            me.afterFade(objCopy);

            //If you click the white thing, then it dies
            me.whiteDiv.attr("id", "theWhiteDiv")
            .click(function(){
                me.die();
            }).hover(
                function(){
                    $(this).css({opacity:0.8});
                },
                function(){
                    $(this).css({opacity:0.9});
                }
            );
            $(document.body).append(
                $('<a href=""><img src="http://173.230.131.173/zoic_media/pics/fadeClose.png"></a>')
                .click(function(){
                    me.die();
                    return false;
                })
                .css({
                    display:"block",
                    position:"fixed",
                    top:0,
                    right:0,
                    zIndex:parseInt(me.whiteDiv[0].style.zIndex)+1000
                }).hover(function(){
                    $(this).stop().animate({
                        top:"-10px",
                        right:"-10px"
                    })
                }, function(){
                    $(this).stop().animate({
                        top:"0px",
                        right:"0px"
                    })
                })
                .find('img').css({
                    border:"none"
                })
                .parent()
            );
        });

    }
        me.setUpObj = function(o, extraRemove){
            //This function puts the obj into an absolutely positioned div
            //in exactly the same place that the original is, and increases z-index to me.zindex
            var offset = $(obj).offset();
            var wrapDiv = $('<div class="content"></div>').css({
                position:"absolute",
                top:offset.top,
                left:offset.left,
                width:$(obj).outerWidth(),
                height:$(obj).height(),
                opacity:0,
                zIndex:me.zindex
            });

            //i'm using the obj, so I can't actually do anythign to it...
            var curObjRef = $(obj)[0];
            var curObj = $(o).css({
                margin:"0 0 0 0",
                width:"100%",
                height:"100%"
            });
            while(curObjRef.parentNode.className.toLowerCase() != "content"){
                curObj = $(curObjRef.parentNode.cloneNode(false))
                    .append(curObj);

                curObjRef = curObjRef.parentNode;
            }

            wrapDiv.append(curObj).appendTo(document.body);

            //Now remove anything that's in remove

            for(var i=0; i<remove.length; i++){
                wrapDiv.find(remove[i]).remove();
            }
            if(extraRemove){
                wrapDiv[0].extraRemove = extraRemove;
            }else{
                wrapDiv[0].extraRemove = function(){};
            }
            return wrapDiv;

        }
        me.fadeAway = function(afterFunction){
            //make a white div that fades in underneath the wrapDiv
            $('object, embed').css({
                visibility:"hidden"
            });
            me.whiteDiv = $('<div></div>').css({
                position:"fixed",
                top:0,
                left:0,
                width:"100%",
                height:"100%",
                backgroundColor:"white",
                opacity:0,
                zIndex:me.zindex-10
            }).appendTo(document.body).animate({
                opacity:0.9
            }, 250);
            objCopy.animate({
                opacity:1
            }, 250, function(){
                afterFunction();
                });
        }

    me.die = function(){
        //This is usually caleld when the close button is clicked
        //It makes everything look normal again
        //It also removes the obj

        me.dead = 1;
        objCopy[0].extraRemove(objCopy);
        me.makeNormal();
    };
    me.makeNormal = function(){
        $('object, embed').css({
                visibility:"visible"
            });
        $('BODY>DIV, BODY>A').each(function(){
            if(this.style.zIndex > me.zindex-100){
                $(this).animate({
                    opacity:0
                }, 250, function(){
                    $(this).remove();
                });
            }
        });
    };
}

function ClickFader(zIndex, afterFunction){ //afterFunction is actually what would happen when this gets clicked
    if(!zIndex){
        zIndex = 1000;
    }
    
    var me = this;

    me.init = function(){
        me.zIndex = zIndex;
        if(afterFunction){
            me.afterFunction = afterFunction;
        }
        me.content = $('<div class="ClickFader"></div>')
        .css({
            position:"fixed",
            top:0,
            left:0,
            backgroundColor:"white",
            opacity:0,
            width:"100%",
            height:"100%",
            cursor:"pointer",
        });
        me.content.appendTo(document.body);
        me.content.animate({
            opacity:0.7,
        }, 250, function(){
            var t = $(this);
            this.afterFunction = function(){};
            if (me.afterFunction){
                this.afterFunction = me.afterFunction;
            }
            t.click(function(){
                $(this).remove();
                this.afterFunction();
            });
        })

    }

    me.init();
}

function ExpandEvent(eventLi){
    var me = this;
    me.status="shrunk";
    me.detailStatus="closed";

    me.expand = function(){
        if(me.status == "shrinking"){
            me.content.stop();
        }
        if(me.status != "expanding"){
            /*
            me.content.animate({
                marginLeft:"30%",
                paddingBottom:"30",
                paddingTop:"30",
                backgroundColor:"#FFFFFF",
            }, 250, function(){
                me.status="expanded";
                if(me.detailStatus=="closed"){
                    me.openDetail();
                }
            });
            */
            me.content.animate({
                backgroundColor:'#FFFFFF',
                paddingTop:30,
                paddingBottom:30,
            },250, function(){
                me.status="expanded";
            })
            me.status="expanding";
        }
    }

    me.shrink = function(){
        if(me.status == "expanding"){
            me.content.stop();
        }
        if(me.status != "shrinking"){
            /*
            me.content.animate({
                marginLeft:"70%",
                paddingBottom:"0",
                paddingTop:"10",
                backgroundColor:"#FFF715",
            }, 250, function(){
                me.closeDetail();
                me.status="shrunk";
            });
            */
            me.content.animate({
                backgroundColor:'#FFFF55',
                paddingTop:10,
                paddingBottom:10,
            }, 250, function(){
                me.status="shrunk";
                me.closeDetail();
            });
            me.status="shrinking";
        }
    }

    me.openDetail = function(){
        var d = me.content.find('.ELIDetail').clone(true).appendTo(me.content);
        d.addClass('detail');
        d.css({
            top:me.content.position().top,
            width:me.content.width()*2,
        });
        d.show("explode", {pieces:16}, function(){
            me.detailStatus = "opened";
        });
     }
    me.closeDetail = function(){
        var d = me.content.find('.detail');
        d.hide("explode", {'pieces':16}, function(){
            $(this).remove();
            me.detailStatus = "closed";
        });
    }

    me.init = function(){
        me.content = $(eventLi);
        me.content.mouseover(function(){
            me.expand();
        });
        me.content.mouseout(function(){
            me.shrink();
        });
        me.content.find('.ELIView')
        .click(function(){
            if(me.detailStatus=="closed"){
                me.openDetail();
            }else if(me.detailStatus=="opened"){
                me.closeDetail();
            }
            return false;
        });
        me.content.find('.rsvp').each(function(){
            var t = $(this);
            t.click(function(){
                $(this).parent().parent().find('.rsvp').removeClass('active');
                $(this).addClass('active');
                $.ajax({
                    url:this.href,
                    success:function(data){
                        if(!data.match(/^Success/)){
                            alert(data);
                        }
                    },
                });
                return false;
            });
        });
    }

    me.init();
    if(!eventLi){
        return false;
    }else{
        return me;
    }
}

$(document).ready(function(){
    $('.ELIView').each(function(){
        var t = $(this);
        new ExpandEvent(t.parent());
    });



    var newsComments = $('DIV#news A.seemore')
    api(newsComments.attr("rel"), function(response){
        if(response){
            comments = $(response).css({
                height:0,
                overflow:"hidden"
            });
            newsComments.after(
                comments
            )
            comments.animate({
                height:comments[0].scrollHeight
            }, 250, function(){
                $(this).css({
                    overflow:"show",
                    height:"auto"
                }).prev().html('See full news page');
            });
        }
    })
})

