/*
 * Copyright (C) 2009 Cognifide
 * 
 * This file is part of Taskboard.
 * 
 * Taskboard is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 * 
 * Taskboard is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU General Public License for more details.

 * You should have received a copy of the GNU General Public License
 * along with Taskboard. If not, see <http://www.gnu.org/licenses/>.
 */

// Some JavaScript magic that adds a little bit of Taskboard's look and feel to taskboard website

/*
 * Computes the maximum height of all the elements (as sum of children heights)
 * and expands all the elements to this height.
 *
 * @param options
 * @param options.offset   Offset in pixels to be added to max height (default = 0)
 * @param options.css      CSS attribute to be changed (default = min-height)
 */
$.fn.equalHeight = function(options){
    var settings = {
        offset : 0,
        css    : "min-height"
    };

    if(options) {
        $.extend(settings, options);
    }

    var maxHeight = 0;
    var height;
    this.css(settings.css, "").each(function(i, el){
        height = $(el).height();
        if(maxHeight < height){
            maxHeight = height;
        }
    });
    return this.css(settings.css, maxHeight + settings.offset);
};

// To show a tip message
$.fn.showTip = function(tip){
    var tipElement = $(this).find(".tip");
    if(tipElement.length === 0){
   	    tipElement = $(document.createElement('div')).addClass("tip").hide();    	
   	    $(this).prepend(tipElement);
    }
    
    var showTip = function(tipElement, tipText){
        if(tipText) tipElement.html(tipText);
        tipElement.fadeIn(function(){});
    }
    if(tipElement.is(":visible") && tipElement.html() === tip) return;
    if(tipElement.is(":visible")) tipElement.fadeOut(function(){ showTip(tipElement, tip); });
    else showTip(tipElement, tip);
}

$.fn.sneakpeak = function(options){
    return this.each(function(){
        var settings = {
            img : null,
            width: $(this).outerWidth() * 2,
            height: $(this).outerHeight() * 2
        }
        $.extend(settings, options);
    
        if(settings.img) $(this).css({ backgroundImage : settings.img });
        
        var changeBackgroundPosition = function(element, bgPosition){
            if($.fx.step.backgroundPosition){ // check if it's possible to animate background position
                $(element).stop().animate({backgroundPosition: '(' + bgPosition + ')'}, "normal", "easeOutBack");
            } else {
                $(element).css({ backgroundPosition: bgPosition });
            }
        };
        
        $(this).bind("mousemove.sneakpeak", function(event){
            clearTimeout($(this).data("timeout.sneakpeak"));
            var position = $(this).position();
            var mPos = { left : event.pageX - position.left, top  : (event.pageY - position.top) };
            var bgX = -(mPos.left / $(this).outerWidth() * (settings.width + 6) - mPos.left);
            var bgY = -(mPos.top / $(this).outerHeight() * (settings.height + 6) - mPos.top);
            var bgPosition = bgX + "px" + " " + bgY + "px";
            changeBackgroundPosition(this, bgPosition);
        }).bind("mouseout.sneakpeak", function(event){
            var self = this;
            $(this).data("timeout.sneakpeak", setTimeout(function(){
                changeBackgroundPosition(self, '0 0');
            }, 2000));
        });;
        
    });
}

$(function(){
    // make features cards sortable
    $(".column .cards")
        .equalHeight()
        .sortable({ 
            cursor: 'move',
            placeholder: 'placeholder card',
            forcePlaceholderSize: true,
            connectWith: '.column .cards',
            change:  function(){ $(".column .cards").equalHeight(); },
            stop: function(event, ui){ ui.item.effect("highlight"); }
        })
        .one("sortstop", function(){
            $("#board").showTip("<p><strong>Simple</strong>, isn't it?</p><p>And that's how easy it is to use Taskboard! Really!</p>");
        });
    
    $("#sneakpeak").sneakpeak({ width : 1200, height : 600 });
    
    $('body').find(".tip").hide().end().showTip("<p><strong>Sneak peak</strong> of Taskboard.</p><p>Move your mouse below to discover some cool features.</p>");
    $("#board").showTip("<p>Want to taste a bit of Taskboard experience?</p><p>Simply <strong>drag &amp; drop</strong> those yellow and blue cards.</p>");
})
