/*
 * Composite - a jQuery plugin for creaing composite images out of transparent png or gifs
 * Copyright (c) 2009 Redpill Linpro
 * Dual licensed under the MIT and GPL licenses.
 * 
 * 
 *
 *
 */
(function($){
 
 
 
/*
 * Setup or change a composite image.
 * The image is made up of one div per layer, this means we can easily swap images
 * or change background position if needed.
 * 
 *
 */ 
$.fn.composite = function(layers,options) {
    options = $.extend($.fn.composite.defaults,options);
    
    var current_layers = this.find('.'+options.layer_class);
    var parent = this;
      
    $.fn.composite.recursive_compose(0,current_layers,layers,parent,options);
  
    if (options.fadeIn) {
        var layers = this.find('.layer');
        var this_org = this;
        var fade = function (nr,layers) {
                        var x = layers.eq(nr);
                        if (x.length > 0) {
                            x.fadeIn(options.fadeIn,function(){
                                fade(nr+1,layers);
                            });
                        } else {
                            if (options.callback) {
                                options.callback.call(this_org);
                            }
                        }
                    } 
        fade(0,layers);
    } else {
        if (options.callback) {
            options.callback.call(this);
        }
    }
    
    return this;
};
    
$.fn.composite.recursive_compose = function (nr,current_layers,layers,parent,options) {
        var layer = layers[nr];
        if (!layer) {  //end of recursion
            return;
        }
      
        //create divs if needed
        var current = current_layers.eq(nr);        
        if (current == undefined || current.length < 1) { //create layer if none is present
            current = $(options.layer_tag).appendTo(parent)
                                          .addClass(options.layer_class)
                                          .width(options.width)
                                          .height(options.height); 
        }
        if (options.fadeIn) {
                current.css('display','none');
        }
       
        //set background
        var css = {};
        if (layer.x || layer.y) {
           
            var css_pos = current.css('background-position');  //FF returns '0px 0px', ie7 undefined...
            if (css_pos) {
                var pos = current.css('background-position').split(' ');
                if (pos.length == 2) {
                    css['background-position'] = (layer.x?layer.x+'px':pos[0])+' '+(layer.y?layer.y+'px':pos[1]);
                } else {
                     css['background-position'] = (layer.x?layer.x+'px':'0px')+' '+(layer.y?layer.y+'px':'0px');
                }
            } else {
                css['background-position'] = (layer.x?layer.x+'px':'0px')+' '+(layer.y?layer.y+'px':'0px');
            }
        }
     
        if (layer.img) {
            css['background-image'] = 'url('+layer.img+')';
        }
        current.css(css);
        
       //recurse
        $.fn.composite.recursive_compose(nr+1,current_layers,layers,current,options);
        
}
 


 
 
$.fn.composite.defaults = {
    width: null,
    height: null,
    fadeIn: null,
    layer_class: 'layer',
    layer_tag: '<div></div>',
    callback: null
};
 
$.fn.composite.layer_defaults = {
    x:  null,  //background position x
    y:  null   //background position x
};
 
 
 
 
 })(jQuery)