/**
 * StripTweet framework
 *
 * @fileOverview	StripTweet_Overlay_Image
 * @author			Matej Keglevic <matej.keglevic>, Copyright (c) 2009, ThirdFrameStudios
 */

/**
 * Description.
 * 
 * @name	StripTweet_Overlay_Image
 * @class	Short Description.
 * @author	Matej Keglevic <matej.keglevic@3fs.si>, Copyright (c) 2009, <a href="http://www.thirdframestudios.com">ThirdFrameStudios</a>
 * @version	1.0
 */

/**
 * <code>
 *  <div id="overlay"></div>
 *      <div id="overlay-image">
 *          <div>
 *              <img src="" alt="" />
 *              <p>
 *                  <span>✿</span> <a href="#" rel="external">http://bit.ly/xxxxxx</a> Comment. <a href="http://twitter.com/francofrattini" rel="external">by FrancoFrattini</a>
 *              </p>
 *              <a href="#" class="close">Close</a>
 *              <div id="left_box"></div><div id="right_box"></div><div id="bottom_box"></div><div id="corner_box">
 *          </div>
 *      </div>
 *  </div>
 * </code>
 */
var StripTweet_Overlay_Image = new Class({
    Extends: StripTweet_Core,
    htmlElements: {
        overlay: '',
        overlayImage: '',
        div: '',
        close: '',
        leftBox: '',
        rightBox: '',
        bottomBox: '',
        cornerBox: '',
        image: '',
        imageLoading: '',
        p: '',
        tweetLink: '',
        tweetUser: ''
    },
    initialize: function(data, options) {
        if ($type(data) === "array") {
            this.setOptions(options);
            this.data = data;
            
            this.setup();
        }
    },
    setup: function() {
        var that = this;
        
        $(document.body).adopt($$(that.htmlElements.overlay = new Element("div", {
            id: "overlay",
            events: {
                click: that.close.bind(that)
            }
        }), that.htmlElements.overlayImage = new Element("div", {
            id: "overlay-image",
            events: {
                click: that.close.bind(that)
            }
        })).setStyles({
            display: "none",
            opacity: 0
        }));
        
        that.htmlElements.div = new Element("div").injectInside(that.htmlElements.overlayImage).adopt(that.htmlElements.close = new Element("a", {
            href: "#",
            html: "Close",
            events: {
                click: that.close.bind(that)
            }
        }), that.htmlElements.leftBox = new Element("div", {
            id: "left_box"
        }), that.htmlElements.rightBox = new Element("div", {
            id: "right_box"
        }), that.htmlElements.bottomBox = new Element("div", {
            id: "bottom_box"
        }), that.htmlElements.cornerBox = new Element("div", {
            id: "corner_box"
        }));
        
        that.htmlElements.close.addClass("close");
        
        that.htmlElements.imageLoading = new Element("img", {
            id: "imageLoading",
            alt: "Loading ...",
            src: "/static/images/loading_big.gif"
        }).injectInside(that.htmlElements.div);
        
        this.createInfo(this.data);
    },
    close: function(event) {
        event = new Event(event).stop();
        
        if (event.target.nodeName !== "A" || (event.target.nodeName === "A" && event.target.className === "close")) {
            $$(this.htmlElements.overlay, this.htmlElements.overlayImage, this.htmlElements.p).setStyles({
                display: "none",
                opacity: 0
            });
            
            $$(this.htmlElements.image).dispose();
            
            this.htmlElements.imageLoading.show();
            
            $$(this.htmlElements.div).setStyles({
                width: "32px",
                height: "0"
            });
            
        } else if (event.target.nodeName === "A" && event.target.rel === "external") {
            window.open(event.target.href, '_blank');
        }
        
        return false;
    },
    createInfo: function(data) {
        var that = this;
        
        if ($(that.htmlElements.p)) {
            $(that.htmlElements.p).dispose();
        }
        
        that.htmlElements.p = new Element("p").injectInside(that.htmlElements.div).adopt(new Element("span", {
            html: "✿ "
        }), that.htmlElements.tweetLink = new Element("a", {
            href: data.url,
            rel: "external",
            html: data.url
        })).appendText(" " + data.tweet).adopt(that.htmlElements.tweetUser = new Element("a", {
            href: "http://twitter.com/" + data.author,
            rel: "external",
            html: "by " + data.author
        })).setStyles({
            display: "none",
            opacity: 0
        });
    },
    loadImage: function(data) {
        this.createInfo(data);
        
        this.preload = new Image();
        this.preload.src = data.img.full;
        this.preload.alt = data.tweet;
        this.preload.onload = this.animate.bind(this);
        
        this.fxOverlay = new Fx.Tween(this.htmlElements.overlay, {
            property: "opacity",
            duration: 250
        });
        
        this.htmlElements.overlay.show();
        this.fxOverlay.set(0).start(0.53);
        
        this.fxOverlayImage = new Fx.Tween(this.htmlElements.overlayImage, {
            property: "opacity",
            duration: 250
        });
        
        this.htmlElements.overlayImage.show();
        this.fxOverlayImage.set(0).start(1);
    },
    animate: function() {
        var w = 320, h = 480;
        
        if (this.preload.height < this.preload.width) {
            w = 480;
            h = 320;
        }
        
        this.htmlElements.image = new Element("img", {
            id: "image",
            alt: this.preload.alt,
            src: this.preload.src,
            width: w,
            height: h
        }).injectBefore(this.htmlElements.imageLoading).setStyles({
            display: "none",
            opacity: 0
        });
        
        //var winScroller = new Fx.Scroll(window);
        //winScroller.toElement(this.htmlElements.overlayImage).chain(function() {
            this.fxResize = new Fx.Morph(this.htmlElements.div, $extend({
                duration: 250,
                link: "chain"
            }));
            
            this.fxResize.start({height: h}).start({width: w}).chain(function() {
                this.htmlElements.imageLoading.hide();
                this.htmlElements.image.show().setStyle("opacity", 1);
                this.htmlElements.p.show().setStyle("opacity", 1);
            }.bind(this));
            
        //}.bind(this));
    }
});