$(document)
.ready(
    function(){
        portolio.initiate();
    }
);

/*
    For each image, find all the offset siblings and
    attach it to each element

    then when mousing over have it only adjust the offest siblings.

    Might want to limit to only the immediate siblings
*/
var portolio = {
    cachedElements : {},
    offSet : 20,
    curLeft :[],
    curTop : [],
    curRight : [],
    curBottom : [],
    initiate : function(){
        this.cacheElements();
        this.paint();
        this.connect();
    },
    cacheElements : function(){
        var self = this,
        ce = self.cachedElements;
        ce.canvas = $('#canvas');
        ce.portItems = $('.port-item', ce.canvas);
    },
    paint : function(){
        var self = this,
        ce = self.cachedElements;
        ce.portItems
        .each(
            function(){
                var that = $(this);
                that.data('good',false);
                that.width(function(){ return $(this).width()-24;});
                that.height(function(){ return $(this).height()-29;});
                var os = that.position();
                os.bottom = that.outerHeight() + os.top;//( that.outerHeight() - 29 ) + os.top;
                os.right = that.outerWidth() + os.left;//( that.outerWidth() - 24 ) + os.left;

                that.data( 'coords', os );
            }
        );
    },
    connect : function(){
        var self = this,
        ce = self.cachedElements;

        ce.portItems
        .mouseenter(
            function( e ){
                var that = $(this);
                var coords = that.data('coords');

                $(this)
                .siblings()
                .each(
                    function(){
                        var el = $(this);
                        var elcoords = el.data('coords');

                        if( coords.right <= elcoords.left ){
                            self.curRight.push( el );
                        }

                        if( coords.bottom <= elcoords.top ){
                            self.curBottom.push( el );
                        }

                        if( coords.left >= elcoords.right ){
                            self.curLeft.push( el );
                        }

                        if( coords.top >= elcoords.bottom ){
                            self.curTop.push( el );
                        }
                    }
                );

                that.data('good',true);
            }
        )
        .mouseout(
            function(){
                $(this).data('good',false);
                self.curLeft = [];
                self.curTop = [];
                self.curRight = [];
                self.curBottom = [];

                for( i = 0, length = self.curLeft.length; i < length; i++ ){
                    var os = self.curLeft[i].data('coords');
                    self.curLeft[i].css('left',os.left);
                }

                for( i = 0, length = self.curTop.length; i < length; i++ ){
                    var os = self.curTop[i].data('coords');

                    self.curTop[i].css('top',os.top);
                }

                for( i = 0, length = self.curRight.length; i < length; i++ ){
                    var os = self.curRight[i].data('coords');
                    self.curRight[i].css('left',os.left);
                }

                for( i = 0, length = self.curBottom.length; i < length; i++ ){
                    var os = self.curBottom[i].data('coords');

                    self.curBottom[i].css('top',os.top);
                }
            }
        )
        .mousemove(
            function( e ){
                var that = $(this);
                if( that.data('good') ){
                    var coords = that.data('coords');
                    var offset = that.offset();
                    var h = coords.bottom - coords.top;
                    var w = coords.right - coords.left;
                    var p = null, q = null, r = null;

                    var x = e.pageX - (offset.left);
                    var y = e.pageY - (offset.top);
                    var dh = (h/2);
                    var dw = (w/2);

                    if( dh <= y ){
                        p = h - y;
                    }
                    else{
                        p = y;
                    }

                    if( dw <= x ){
                        q = w - x;
                    }
                    else{
                        q = x;
                    }

                    if( p > q ){
                        r = (p/dh);
                    }
                    else{
                        r = (p/dw);
                    }

                    for( i = 0, length = self.curLeft.length; i < length; i++ ){
                        var os = self.curLeft[i].data('coords');
                        //self.curLeft[i].css('left',(os.left - (r*self.offSet) ));

                        self.curLeft[i].stop().animate({left:(os.left - (r*self.offSet) )},500,'easeInOutQuad' );
                    }

                    for( i = 0, length = self.curTop.length; i < length; i++ ){
                        var os = self.curTop[i].data('coords');

                        self.curTop[i].stop().animate({top:(os.top - (r*self.offSet) )},500,'easeInOutQuad' );
                    }

                    for( i = 0, length = self.curRight.length; i < length; i++ ){
                        var os = self.curRight[i].data('coords');

                        self.curRight[i].stop().animate({left:(os.left + (r*self.offSet) )},500,'easeInOutQuad' );
                    }

                    for( i = 0, length = self.curBottom.length; i < length; i++ ){
                        var os = self.curBottom[i].data('coords');

                        self.curBottom[i].stop().animate({top:(os.top + (r*self.offSet) )},500,'easeInOutQuad' );
                    }
                    /*self.curTop = [];
                    self.curRight = [];
                    self.curBottom = [];*/
                }
            }
        );
    }
};