Event.observe(window, 'load', init, false);

function getQuerystring(key, default_)
{
    if (default_ == null) default_ = "";
    key = key.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regex = new RegExp("[\\?&]"+key+"=([^&#]*)");
    var qs = regex.exec(window.location.href);
    if(qs == null) return default_;
    else return qs[1];
}

function init()
{
    var shop_items = $('shop-items');
    if (shop_items) {
        var elements = $('shop-items').getElementsByClassName('button-add');
        for (i = 0; i < elements.length; i++) {
            elements[i].onclick = aantalDialog;
        }
    }
    
    var item_add = $('button-toevoegen');
    if (item_add) {
        item_add.onclick = aantalDialog;
    }
    
    // return to page offset
    var page_offset = getQuerystring('page_offset');
    if (page_offset > 0) {
        if (window.scrollTo) window.scrollTo(0, page_offset);
    }
}

function aantalDialog(e)
{
    if (!e) var e = window.event
    
    var element = Event.element(e);
    
    var offset = element.cumulativeScrollOffset();

    var scroll_top = offset[1] + 200;
    
    if (this.id == 'button-toevoegen') {
        var product_page = true;
        var item_data = element.up('div');
    }
    else {
        var product_page = false;
        var item_data = element.up('li');
    }

    var product_id = parseInt(item_data.getAttribute('data-product_id'));
    var stuks_eenheid = parseInt(item_data.getAttribute('data-stuks_eenheid'));
    var min_afname = parseInt(item_data.getAttribute('data-min_afname'));
    
    var div = $('product-add-dialog');
    if (div) {
        if (div.product_id == product_id) {
            div.remove();
            return false;
        }
        div.remove();
    }

    var div = new Element('div', {id: 'product-add-dialog'});
    div.product_id = product_id;
    
    div.style.top = scroll_top + "px";
    div.style.left = 475 + "px";
    
    div.appendChild(new Element('h3').update('Product toevoegen'));
    
    //div.appendChild(new Element('p', {id: 'link-uitleg-eenheden'}).update());

    var form = div.appendChild(new Element('form', {
        id: 'form-add-dialog', action: '/site/home', method: 'post'
    }));
    
    var input_div = form.appendChild(new Element('div'));
    input_div.appendChild( new Element('input', {type: 'hidden', id: 'stuks_eenheid', name: 'stuks_eenheid', value: stuks_eenheid, disabled: 'disabled'}));
    input_div.appendChild( new Element('input', {type: 'hidden', id: 'min_afname', name: 'min_afname', value: min_afname, disabled: 'disabled'}));
    input_div.appendChild( new Element('input', {type: 'hidden', id: 'product_id', name: 'product_id', value: product_id}));
    // pagina + positie bewaren
    if (!product_page) {
        input_div.appendChild( new Element('input', {type: 'hidden', id: 'page_ref', name: 'page_ref', value: window.location.href}));
        input_div.appendChild( new Element('input', {type: 'hidden', id: 'page_offset', name: 'page_offset', value: document.viewport.getScrollOffsets().top}));
    }
    
    var table = form.appendChild(new Element('table'));
    var tbody = table.appendChild(new Element('tbody'));
    var tr = tbody.appendChild(new Element('tr'));
    tr.appendChild(new Element('th').update('Eenheden afnemen per'));
    tr.appendChild(new Element('td', {'class': 'eenheden-afnemen-per'}).update(min_afname));
    
    var tr = tbody.appendChild(new Element('tr', {'class': 'eenheden-aantal'}));
    tr.appendChild(new Element('th'));
    var td = tr.appendChild(new Element('td', {'class': 'col-values'}));
    var eenheden_afname = td.appendChild(new Element('input', {type: 'text', name: 'eenheden_afname', id: 'eenheden_afname', size: 4, value: 1, autocomplete: 'off'}));
    td.appendChild(document.createTextNode(' x'));
    
    eenheden_afname.onkeyup = updateTotaalAfname;
    
    var tr = tbody.appendChild(new Element('tr', {'class': 'totaal-eenheden'}));
    tr.appendChild(new Element('th').update('Totaal aantal eenheden:'));
    tr.appendChild(new Element('td', {id: 'totaal-eenheden-aantal'}).update(min_afname));
    
    var tr = tbody.appendChild(new Element('tr', {'class': 'totaal-stuks'}));
    tr.appendChild(new Element('th').update('Totaal aantal stuks:'));
    tr.appendChild(new Element('td', {id: 'totaal-eenheden-stuks'}).update(min_afname * stuks_eenheid));
    
    var tr = tbody.appendChild(new Element('tr'));
    tr.appendChild(new Element('td', {colspan: 2}).update("<a href=\"/site/uitleg-eenheden\" target=\"_blank\">Ik weet niet wat eenheden en stuks zijn.</a>"));
    
    var p = form.appendChild(new Element('p', {'class': 'submit'}));
    var annuleren = p.appendChild(new Element('input', {type: 'image', src: '/images/site/buttons/annuleren.gif', alt: 'Annuleren'}));
    annuleren.onclick = function() {
        $('product-add-dialog').remove();
        return false;
    };
    p.appendChild(new Element('input', {type: 'image', src: '/images/site/buttons/toevoegen.gif', alt: 'Toevoegen'}));

    $('content').appendChild(div);
    return false;
}

function updateTotaalAfname(e) {

    if (!e) var e = window.event;
    
    var input = Event.element(e);
    var value = input.value;
    
    if (isNaN(value) || value < 0) value = 0;
    if (value > 9999) {
        value = 9999;
        input.value = value;
    }
    
    var afnemen_per = $F('min_afname');
    var totaal = value * afnemen_per;
    var totaal_stuks = $F('stuks_eenheid') * totaal;
    
    $('totaal-eenheden-aantal').update(totaal);
    $('totaal-eenheden-stuks').update(totaal_stuks);
    
    return false;
}