zindexOffset = 0;
previousWindowHeight = 0;
previousWindowWidth = 0;
var floatingOffset = 20;
var scrollOffset = 0;

$(document).ready(function () {
    
    //DRAGGABLE BG ELEMENTS
    $('.draggable').click(function(event) {
        if($('#'+this.id+'-type').val() == 'local') {
            $('#'+$('#'+this.id+'-target').val()).trigger('click');
        }else{
            var newWindow = window.open($('#'+this.id+'-target').val(), '_blank');
            newWindow.focus();
        }
        return false;
    });
    $('.draggable').bind('drag', function(event, ui) {
        restrainToBoundaries($('#'+this.id));
        $('#'+this.id+'-pic').css($('#'+this.id).offset());
    });
    
    $('.draggable').bind('dragstop', function(event, ui) { 
        $('#'+this.id).css("z-index", 7400);
        restrainToBoundaries($('#'+this.id));
    });
    $('.draggable').bind('dragstart', function(event, ui) {
        $('#'+this.id).css("z-index", 500000);
        restrainToBoundaries($('#'+this.id));
    });
    
    $('.projectLink').mouseover(projectLinkMouseOver);    
    $('.projectLink').mouseout(projectLinkMouseOut);
    
    $(window).wresize(content_resize);
    
});

$(window).load( function() {
    randomizeFloatingImages(false);
    $('.draggablePicture').css("visibility", "visible");
});

function projectLinkMouseOver(event) {
    event.stopPropagation();
    $('#bgDrag-'+this.id).removeClass('draggablePictureFade');
    $('#bgDrag-'+this.id).css("z-index", 7000);
}

function projectLinkMouseOut(event) {
    event.stopPropagation();
    $('#bgDrag-'+this.id).addClass('draggablePictureFade');
    $('#bgDrag-'+this.id).css("z-index", 1);
}

function content_resize()  
{
    $.each($('.draggablePicture'), function(index, element) {
        var position = $("#"+element.id).offset();
        position.left = Math.floor((position.left * $(window).width()) / previousWindowWidth);
        position.left = (position.left >= floatingOffset) ? position.left : floatingOffset;
        position.top = Math.floor((position.top * $(window).height()) / previousWindowHeight);
        position.top = (position.top >= floatingOffset) ? position.top : floatingOffset;       
        $("#"+element.id).css(position);
    });
    
    previousWindowWidth = $(window).width();
    previousWindowHeight = $(window).height();
}

function randomizeFloatingImages(animate) {
    
    previousWindowWidth = $(window).width();
    previousWindowHeight = $(window).height();

    $.each($('.draggablePicture'), function(index, element) {
        var randOffset = 20;
        var randomWidth = randOffset + Math.floor(Math.random()*($(window).width() - $("#"+element.id).width() - (2*randOffset)));
        var randomHeight = randOffset + Math.floor(Math.random()*($(window).height() - $("#"+element.id).height() - (2*randOffset)));
            
        var position = $("#"+element.id).offset();
        position.top = randomHeight;
        position.left = randomWidth;        
        $("#"+element.id).css(position);
        $("#"+element.id+"-pic").css($("#"+element.id).offset());
    });
}

function restrainToBoundaries(elem) {
    
    var pos = elem.offset();
    if(pos.left >= ($(window).width() - elem.width() - floatingOffset)) {
        pos.left = ($(window).width() - elem.width() - floatingOffset);
    }
    if(pos.left <= floatingOffset) pos.left = floatingOffset;
    if(pos.top >= ($(window).height() - elem.height() - floatingOffset)) {
        pos.top = ($(window).height() - elem.height() - floatingOffset);
    }
    if(pos.top <= floatingOffset) pos.top = floatingOffset;        
    elem.css(pos);
}

function has_scrollbar(previousDimension)
{
    var elem = $('#'+elem_id);
    if(direction == 'width') {
        if (elem.width() < elem.scrollWidth())
            return true;
        else
            return false;
    }else{
        
        if (elem.height() < elem.scrollHeight())
            return true;
        else
            return false;
    }   
}

function getScrollBarWidth () {
    var inner = document.createElement('p');
    inner.style.width = "100%";
    inner.style.height = "200px";
  
    var outer = document.createElement('div');
    outer.style.position = "absolute";
    outer.style.top = "0px";
    outer.style.left = "0px";
    outer.style.visibility = "hidden";
    outer.style.width = "200px";
    outer.style.height = "150px";
    outer.style.overflow = "hidden";
    outer.appendChild (inner);
  
    document.body.appendChild (outer);
    var w1 = inner.offsetWidth;
    outer.style.overflow = 'scroll';
    var w2 = inner.offsetWidth;
    if (w1 == w2) w2 = outer.clientWidth;
  
    document.body.removeChild (outer);
  
    return (w1 - w2);
};


function findIntersectors(targetSelector, intersectorsSelector) {
    var intersectors = [];

    var $target = $(targetSelector);
    var tAxis = $target.offset();
    var t_x = [tAxis.left, tAxis.left + $target.outerWidth()];
    var t_y = [tAxis.top, tAxis.top + $target.outerHeight()];

    $(intersectorsSelector).each(function() {
          var $this = $(this);
          var thisPos = $this.offset();
          var i_x = [thisPos.left, thisPos.left + $this.outerWidth()]
          var i_y = [thisPos.top, thisPos.top + $this.outerHeight()];

          if ( t_x[0] < i_x[1] && t_x[1] > i_x[0] &&
               t_y[0] < i_y[1] && t_y[1] > i_y[0]) {
              intersectors.push(this.id);
          }
    });
    return intersectors;
}