var aImages = new Array
    var cContainer = $('c_container').positionedOffset();
    cContainer[0] += 20
    cContainer[1] += 40

    var deltaX = 170
    var deltaY = 190
	var deltaYarchive = 85
    var leftH = 530
	var defwidth = 150
	var archwidth = 75

	function writeArray(){
        var result = ''
        for (var i = 0; i < aImages.length; i++){
            result += aImages[i].id.replace(/i/,'');
            if (i < (aImages.length -1)) result += '_'
        }
		
		new Ajax.Updater('testje', '/mijnkalender/volgorde_update/' + result + '?ch=' + $('chhidden').value, {asynchronous:true, evalScripts:true});
    }

    function doSnap(x, y) { 
        x = x - cContainer[0];
        y = y - cContainer[1]
        
        if (x < (leftH - 100)) {
            rx = Math.round((x / deltaX)) * deltaX
        } else {
            rx = leftH
        }

        ry = Math.round((y / deltaY)) * deltaY

        return [rx + cContainer[0], ry + cContainer[1]]; 
    }
    
    function currentPos(id) {
        for (var i = 0; i < aImages.length; i++){
            if (aImages[i].id == id) return i;
        }
    }
    
    function correctWidth(e, pos, volgnr) {
		w = e.getWidth()
		if (w > 0) {
			return parseInt(pos + ((((volgnr > 11) ? archwidth : defwidth) - w) / 2))
		} else {
			return (volgnr > 11) ? pos : pos
		}
    }

    function correctHeight(e, pos, volgnr) {
		h = e.getHeight()
		if (h > 0) {
	        return parseInt(pos + ((((volgnr > 11) ? archwidth : defwidth) - h) / 2))
		} else {
	        return pos
		}
    }

    
    function dodrop(e, evt){
        c = e.element.positionedOffset();
        newPos = getVolgnr(c[0] - cContainer[0], c[1] - cContainer[1]);
        curPos = currentPos(e.element.id);
        other = aImages[newPos]
        aImages[newPos] = e.element
        aImages[curPos] = other

		other.setStyle({width: 'auto' })
		other.setStyle({width: (curPos > 11) ? parseInt(other.getWidth() / 2) + 'px' : 'auto' })
		e.element.setStyle({width: 'auto' })
		e.element.setStyle({width: (newPos > 11) ? parseInt(e.element.getWidth() / 2) + 'px' : 'auto' })
        e.element.setStyle({left: correctWidth(e.element, sLeft(newPos), newPos) + 'px', top: correctHeight(e.element, sTop(newPos), newPos) + 'px'});
        other.setStyle({left: correctWidth(other, sLeft(curPos), curPos) + 'px', top: correctHeight(other, sTop(curPos), curPos) + 'px'});

	
        writeArray();
    }

    function sLeft(volgnr){
        if (volgnr < 12) {
            return deltaX * (volgnr % 3) + cContainer[0]
        } else {
            return leftH + cContainer[0]
        }
    }
    function sTop(volgnr){
        if (volgnr < 12) {
            y = parseInt(volgnr / 3)
            return deltaY * y + cContainer[1]
        } else {
            y = parseInt((volgnr - 11) - 0)
            return deltaYarchive * y + cContainer[1]
        }
    }
    
    function getVolgnr(x,y){
        if (x >= leftH) {
            // archief
            return 12 + (y / deltaY)
        } else {
            //actief
            return 3 * (y / deltaY) + (x / deltaX)
        }
    }

    function init(eid, volgnr){
        volgnr = volgnr -1 
        e = $(eid)
        aImages[volgnr] = e
        new Draggable(e, {onEnd:dodrop, snap:doSnap});
        e.absolutize
        e.setStyle({left: (correctWidth(e, sLeft(volgnr), volgnr) + ((volgnr > 11) ? 40 : 0)) + 'px', top: correctHeight(e, sTop(volgnr), volgnr) + 'px'});
		if (volgnr > 11) e.setStyle({width: parseInt(e.getWidth() / 2) + 'px'})
	}

    function initcontainers(){
		
        a = document.getElementsByClassName('monthcontainer');
        for (var i = 0; i < a.length; i++) {
            volgnr = parseInt(a[i].id.replace(/m/,'')) -1
            a[i].setStyle({left: (sLeft(volgnr) -6) + 'px', top: (sTop(volgnr) - 5) + 'px'});
        }
        $('archive').setStyle({left: (sLeft(12) -6) + 'px', top: (sTop(12) - 90) + 'px'});
    }