/* jquery.goatstone.collageImage.js
*/

$.widget("ui.collageImage", {
    options: {},
    props: {
        maxZindex:0
    }, // TODO : zIndex system
    _create: function() {
        var $this = this;
        var l = Math.random()*300;
        var t = 100 + Math.random()*230;
//        alert(l + ' : '+t);       
        l=0;t=0;
        $this.element.addClass('collage-image');
        $this.element.css({
            position:"absolute",
            zIndex:1000 + $('.collage-image').length+1,
//            left:l,
//            top:t,            
            width:g.images[$this.options.id].media$group.media$thumbnail[2].width,
            height:g.images[$this.options.id].media$group.media$thumbnail[2].height
        });
        $this.element.draggable({
            stack: ".collage-image"
        });

        $this.element.bind('click',function(){
            var str = " <small>Title:</small> " + g.images[$this.options.id].title.$t +" : "+
            " <small>Summary: </small> " + g.images[$this.options.id].summary.$t +
            " <small>Author: </small> " + g.images[$this.options.id].author[0].name.$t +
            " <small>Original: </small> " + '<a target="new" href="'+g.images[$this.options.id].content.src +'">'+g.images[$this.options.id].content.src + '</a>'
            ;
            $('div[data-name="message"]').html( str );                 // TODOOOOOOOOO!
        });

        $this.element.bind('mousedown',function(e){
            if(e.ctrlKey || e.metaKey){                
                $this.element.remove();
                return false;                
            }
        })
        
        $this.element.draggable();        
        $this.element.resizable();        
        
        $this.element.append( $('<img>').attr({
            src: g.images[$this.options.id].media$group.media$thumbnail[2].url,
            width:'100%',
            height:'100%'
        }))

    }
});