/*

JQuery Name: AnimateFeature
Syntax: AnimateFeature(options)
Options: 
    {
    background,
    featureContentBG,
    overlayImg,
    skipIntro=false,
    feature1,
    feature2
    }
    where each feature has the following options:
        top: where the handle/teaser stops
        bgcolor: overlay background color when the content is shown
        onOpen: a handler that shows the content
        content: jQuery selector that points to the content
Description: This animates the feature on the Roundedcube.com Website
Author: Roundedcube, Inc.
Version: 1.0.0
Date: Aug 2010

*/


(function ($) {

    var defaults = {
        background: "url(/images/rc-feature-background.png) no-repeat",
        featureContentBG: "#00cc00",
        overlayImg: "/images/rc-feature-dots.png",
        skipIntro: false,
        feature1: { top: null, content: null, onOpen: null, bgcolor: null },
        feature2: { top: null, content: null, onOpen: null, bgcolor: null },
        ms: { rows: 10, cols: 15, mines: 25, url: "/LetsConnect?ms" }
    };

    $.fn.AnimateFeature = function (o) {
        return this.each(function () {
            $(this).data('animatefeature', new $af(this, o));
        });
    }

    $.AnimateFeature = function (e, o) {

        this.options = $.extend({}, defaults, o || {});
        this.feature = e;
        this.container = null;
        this.overlay = null;
        this.left = null;
        this.leftWrap = null;
        this.leftContent = null;
        this.right = null;
        this.rightWrap = null;
        this.rightContent = null;

        this.leftWrapWidth = null;
        this.rightWrapWidth = null;
        this.grnWidth = 5;
        this.lineWidth = 2;
        this.overlayBGColor = this.options.featureContentBG;

        this.animating1 = false;
        this.animating2 = false;

        this.currentFeature = null;

        this.name = "AnimateFeature";

        // set some defaults if they were not specified
        if (this.options.feature1.top == null)
            this.options.feature1.top = 50;
        if (this.options.feature2.top == null)
            this.options.feature2.top = 125;


        if (this.options.feature1.onOpen == null)
            this.options.feature1.onOpen = this.feature1OnOpen;

        if (this.options.feature2.onOpen == null)
            this.options.feature2.onOpen = this.feature2OnOpen;

        if (this.options.feature1.bgcolor == null)
            this.options.feature1.bgcolor = this.options.featureContentBG;
        if (this.options.feature2.bgcolor == null)
            this.options.feature2.bgcolor = this.options.featureContentBG;


        this.build();
        this.bindEvents();
        this.start();
    }

    var $af = $.AnimateFeature;
    $af.fn = $af.prototype = {
        animatefeature: '1.0.0'
    };

    $af.fn.extend = $af.extend = $.extend;

    $af.fn.extend({

        build: function () {

            // build the DOM
            this.container = $("<div id='rc_feature'></div>").appendTo(this.feature);
            this.overlay = $("<div class='overlay'></div>").appendTo(this.container);
            this.leftWrap = $("<div class='featureWrap left'></div>").appendTo(this.overlay);
            this.left = $("<div class='feature'></div>").appendTo(this.leftWrap);

            this.leftContent = $(this.options.feature1.content).find(".teaser").appendTo(this.left);
            this.rightWrap = $("<div class='featureWrap right'></div>").appendTo(this.overlay);
            this.right = $("<div class='feature'></div>").appendTo(this.rightWrap);
            this.rightContent = $(this.options.feature2.content).find(".teaser").appendTo(this.right);

            this.featureContentOverlay = $("<div class='featureContentOverlay'></div>").appendTo(this.overlay).hide();
            this.featureContentWrap = $("<div class='featureContentWrap'></div>").appendTo(this.overlay).hide();

            $(this.featureContentOverlay).css({ left: this.overlay.width() }).show();

            this.leftWrapWidth = this.leftWrap.width();
            this.rightWrapWidth = this.rightWrap.width();

        }, // end build

        bindEvents: function () {
            this.leftWrap.bind("click", { self: this }, this.leftClick);
            this.rightWrap.bind("click", { self: this }, this.rightClick);
            this.container.bind("dblclick", { self: this }, this.showMinesweeper);
        }, // end bindEvents

        start: function () {

            var self = this;

            // setup the main bg

            $(this.container).css({ "background": this.options.background });
            if (!this.options.skipIntro)
                this.container.hide();

            // setup the overlay                
            //alert(this.options.overlayImg);
            this.overlay.css({ "background": "url(" + this.options.overlayImg + ")" }); //.css("border-right", "2px solid #00cc00");

            // show the overlay/bg
            if (!this.options.skipIntro)
                this.container.fadeIn("slow");

            // setup the feature content overlay
            $(this.featureContentOverlay).css({ "background": this.options.featureContentBG });

            //animate the left
            $(this.leftWrap).css({ "background": this.overlayBGColor });
            this.leftWrap.css("width", this.grnWidth);
            var x = this.overlay.width() - this.leftWrap.width() + 1;
            var y = 0 - this.leftWrap.height() - 10;
            var yBot = this.overlay.height() - this.leftWrap.height() - 50;

            if (!this.options.skipIntro) {
                this.animating1 = true;
                this.leftWrap.css({ top: y, left: x });
                $(this.leftWrap).animate({ top: yBot }, 3000, "swing").animate({ top: this.options.feature1.top }, 1000, "swing");
                $(this.leftWrap).animate({ width: this.leftWrapWidth, left: this.leftWrap.position()["left"] - this.leftWrapWidth + this.grnWidth }, 100,
                      function () { self.animating1 = false; });
            }
            else {
                this.leftWrap.css({ top: this.options.feature1.top, left: this.overlay.width() - this.leftWrapWidth + 1, width: this.leftWrapWidth });
            }

            //animate the right
            $(this.rightWrap).css({ "background": this.overlayBGColor });
            this.rightWrap.css("width", this.grnWidth);
            var x = this.overlay.width() + 1;
            var y = this.overlay.height() + this.rightWrap.height();
            var yTop = 50;

            if ((this.options.feature2.top + this.rightWrap.height()) > this.overlay.height())
                this.options.feature2.top = this.options.feature2.top + this.leftWrap.height();

            if (!this.options.skipIntro) {
                this.animating2 = true;
                this.rightWrap.css({ top: y, left: x });


                $(this.rightWrap).animate({ top: yTop }, 1000, "swing").animate({ top: this.options.feature2.top }, 2000, "swing");

                $(this.rightWrap).animate({ width: this.rightWrapWidth }, 100,
                      function () { self.animating2 = false; });
            }
            else {
                this.rightWrap.css({ top: this.options.feature2.top, left: x, width: this.rightWrapWidth });
            }

        }, // end start

        leftClick: function (data) {
            //alert("Left Clicked");
            var self = data.data.self;
            if (self.animating1 || self.animating2) return;
            self.currentFeature = self.options.feature1;
            self.openFeature(data);
        }, // end leftClick

        rightClick: function (data) {
            //alert("Right Clicked");
            var self = data.data.self;
            if (self.animating1 || self.animating2) return;
            self.currentFeature = self.options.feature2;
            self.openFeature(data);
        }, // end rightClick

        openFeature: function (data) {

            var self = this;
            var exitImg = null;

            if (!this.options.skipIntro) {
                $(this.leftWrap).animate({ width: this.grnWidth, left: this.leftWrap.position()["left"] + this.leftWrapWidth - this.grnWidth }, "fast");

                $(this.rightWrap).animate({ width: this.grnWidth }, "fast");
                //alert(this.overlay.width());
                //$(this.overlay).css("border-right", "none");
                var leftOverlay = Math.floor(this.container.width() / 2) - $(this.overlay).width();
                $(this.overlay).delay(1000).animate({ left: leftOverlay }, "fast");

                //$(this.overlay).fadeTo("fast",0);

                // hide the handles
                $(this.leftWrap).delay(1000).fadeTo("slow", 0);
                $(this.rightWrap).delay(1000).fadeTo("slow", 0);
                // $(this.overlay).css("bac kground-image", "none");

                $(this.featureContentWrap).css({ width: this.container.width(), left: 0 - leftOverlay }).show();

                exitImg = $("<span class='exit'><img src='/images/exit.png' /></span>").appendTo(this.featureContentWrap).hide();

                $(this.featureContentOverlay).delay(1500).fadeTo(50, 0.3).fadeTo(50, 0.5).fadeTo(50, 0.1).fadeTo(50, 1).fadeTo(50, 0.3).fadeTo(50, 1).fadeTo(100, .3).animate({ width: this.container.width(), left: 0 - leftOverlay }, function () {
                    // set the overlay
                    self.overlayBGColor = $(self.featureContentOverlay).css("backgroundColor");
                    $(self.featureContentOverlay).css({ backgroundColor: self.currentFeature.bgcolor });
                    exitImg.fadeIn();
                    self.currentFeature.onOpen(self);
                });

            }
            else {
                var leftOverlay = 0;
                //$(this.featureContentOverlay).show();
                $(this.leftWrap).delay(1000).hide();
                $(this.rightWrap).delay(1000).hide();
                $(this.featureContentOverlay).css({ width: this.container.width(), left: 0 - leftOverlay, opacity: .3 });
                self.overlayBGColor = $(self.featureContentOverlay).css("backgroundColor");
                $(self.featureContentOverlay).css({ backgroundColor: self.currentFeature.bgcolor });
                $(this.featureContentWrap).css({ width: this.container.width(), left: 0 - leftOverlay }).show();
                exitImg = $("<span class='exit'><img src='/images/exit.png' /></span>").appendTo(this.featureContentWrap);

                self.currentFeature.onOpen(self);
            }

            // bind the exitImg
            exitImg.bind("click", { self: self }, this.closeFeature);

        }, // end openFeature

        closeFeature: function (data) {
            var self = data.data.self;
            var leftX = self.overlay.width();

            // put the overlay in its original color
            $(self.featureContentOverlay).css({ backgroundColor: self.overlayBGColor });

            // remove feature content
            $(self.featureContentWrap).children().fadeOut(100);
            $(self.featureContentOverlay).animate({ width: self.lineWidth, left: leftX });
            $(self.featureContentOverlay).fadeTo(200, 1);
            $(self.overlay).delay(1000).animate({ left: 0 });

            // show the handles
            $(self.leftWrap).delay(200).fadeTo("fast", 1);
            $(self.rightWrap).delay(200).fadeTo("fast", 1);

            self.animating1 = true;
            $(self.leftWrap).delay(500).animate({ width: self.leftWrapWidth, left: self.leftWrap.position()["left"] - self.leftWrapWidth + self.grnWidth }, "fast",
                      function () { self.animating1 = false; });

            self.animating2 = true;
            $(self.rightWrap).delay(1000).animate({ width: self.rightWrapWidth }, "fast",
                      function () { self.animating2 = false; });

            self.currentFeature = null;
        }, // end closeFeature

        feature1OnOpen: function (data) {

            // build the feature
            var myContent = $("<div id='content1'></div>").appendTo(data.featureContentWrap);
            var sampleContent = $("<a href='#'>This a sample content 1</a>").appendTo(myContent);
            myContent.hide().delay(300).fadeIn();

        }, // end feature1Content

        feature2OnOpen: function (data) {

            // build the feature
            var myContent = $("<div id='content2'></div>").appendTo(data.featureContentWrap);
            var sampleContent = $("<a href='#'>This a sample content 2</a>").appendTo(myContent);
            myContent.hide().delay(300).fadeIn();
        }, // end feature2Content

        showMinesweeper: function (data) {

            var self = data.data.self;

            // minesweeper easter egg
            // center content
            var ms = $("<div id='rcminesweeper' style='float: left; position: absolute; z-index: 100'></div>").appendTo(self.feature).hide();

            $(ms).Minesweeper(self.options.ms);

            var leftX = Math.floor($(self.container).width() / 2) - Math.floor(ms.width() / 2);
            var topY = Math.floor($(self.container).height() / 2) - Math.floor(ms.height() / 2);
            $(ms).css({ top: topY, left: leftX });
            $(ms).fadeIn(600);

        } // end showMinesweeper

    }); // end extend
})(jQuery);