/////////////////////////////////////////////////////////////////////

var FloatLayers = new Array();
var FloatLayersByName = new Array();

function addFloatLayer(n, offX, offY, spd) {
    new FloatLayer(n, offX, offY, spd);
}

function getFloatLayer(n) {
    return FloatLayersByName[n];
}
function alignFloatLayers() {
    for (var i = 0; i < FloatLayers.length; i++)
        FloatLayers[i].align();
}

var getXCoord = function(el) {
    x = 0;
    while (el) {
        x += el.offsetLeft;
        el = el.offsetParent;
    }
    return x;
}
var getYCoord = function(el) {
    y = 0;
    while (el) {
        y += el.offsetTop;
        el = el.offsetParent;
    }
    return y;
}

/////////////////////////////////////////////////////////////////////

FloatLayer.prototype.setFloatToTop = setTopFloater;
FloatLayer.prototype.setFloatToBottom = setBottomFloater;
FloatLayer.prototype.setFloatToLeft = setLeftFloater;
FloatLayer.prototype.setFloatToRight = setRightFloater;
FloatLayer.prototype.initialize = defineFloater;
FloatLayer.prototype.adjust = adjustFloater;
FloatLayer.prototype.align = alignFloater;

function FloatLayer(n, offX, offY, spd) {
    this.index = FloatLayers.length;

    FloatLayers.push(this);
    FloatLayersByName[n] = this;

    this.name = n;
    this.floatX = 0;
    this.floatY = 0;
    this.tm = null;
    this.steps = spd;
    this.alignHorizontal = (offX >= 0) ? leftFloater : rightFloater;
    this.alignVertical = (offY >= 0) ? topFloater : bottomFloater;
    this.ifloatX = Math.abs(offX);
    this.ifloatY = Math.abs(offY);
}

/////////////////////////////////////////////////////////////////////

function defineFloater() {
    this.layer = document.getElementById(this.name);
    this.width = this.layer.offsetWidth;
    this.height = this.layer.offsetHeight;
    this.prevX = this.layer.offsetLeft;
    this.prevY = this.layer.offsetTop;
}

function adjustFloater() {
    this.tm = null;
    if (this.layer.style.position != 'absolute') return;

    var dx = Math.abs(this.floatX - this.prevX);
    var dy = Math.abs(this.floatY - this.prevY);

    if (dx < this.steps / 2)
        cx = (dx >= 1) ? 1 : 0;
    else
        cx = Math.round(dx / this.steps);

    if (dy < this.steps / 2)
        cy = (dy >= 1) ? 1 : 0;
    else
        cy = Math.round(dy / this.steps);

    if (this.floatX > this.prevX)
        this.prevX += cx;
    else if (this.floatX < this.prevX)
        this.prevX -= cx;

    if (this.floatY > this.prevY)
        this.prevY += cy;
    else if (this.floatY < this.prevY)
        this.prevY -= cy;

    this.layer.style.left = this.prevX + "px";
    this.layer.style.top = this.prevY + "px";

    if (cx != 0 || cy != 0) {
        FloatLayers[this.index].adjust();
    } else
        alignFloatLayers();
}

function setLeftFloater() {
    this.alignHorizontal = leftFloater;
}
function setRightFloater() {
    this.alignHorizontal = rightFloater;
}
function setTopFloater() {
    this.alignVertical = topFloater;
}
function setBottomFloater() {
    this.alignVertical = bottomFloater;
}

function leftFloater() {
    this.floatX = document.documentElement.scrollLeft + this.ifloatX;
}
function topFloater() {
    this.floatY = document.documentElement.scrollTop + this.ifloatY;
}
function rightFloater() {
    this.floatX = document.documentElement.scrollLeft + document.documentElement.clientWidth - this.ifloatX - this.width;
}
function bottomFloater() {
    this.floatY = document.documentElement.scrollTop + document.documentElement.clientHeight - this.ifloatY - this.height;
}

function alignFloater() {
    if (this.layer == null)
        this.initialize();

    this.alignHorizontal();
    this.alignVertical();

    var trackPos = $("#sliderTrack").position();
    this.floatX = trackPos.left;
    var nextFloatY = trackPos.top < document.documentElement.scrollTop ? document.documentElement.scrollTop : trackPos.top;

    //var cartPos = $("#serviceSelectedItemsListContainer").position();
    var servicePos = $("#serviceChooseContainer").position();
    var cartBottomPos = nextFloatY + $("#serviceSelectedItemsListContainer").height();
    var serviceBottomPos = parseInt(servicePos.top) + $("#serviceChooseContainer").height();

    if (cartBottomPos > serviceBottomPos) {
        this.floatY = nextFloatY - (cartBottomPos - serviceBottomPos) + 20;
    } else {
        this.floatY = nextFloatY;
    }

    this.floatX = parseInt(this.floatX);
    this.floatY = parseInt(this.floatY);

    if (this.prevX != this.floatX || this.prevY != this.floatY) {
        FloatLayers[this.index].adjust();
    }
}

function detach(element) {
    var lay = document.getElementById(element);
    var left = getXCoord(lay);
    var top = getYCoord(lay);
    lay.style.position = 'absolute';
    
    lay.style.top = top + "px";
    lay.style.left = left + "px";
    getFloatLayer(element).initialize();
    alignFloatLayers();
}

$(function () {
    $(window).resize(alignFloatLayers);
    $(window).scroll(alignFloatLayers);
})