var holder, inputs, url_display, img, crop_area = [], slider_vals = {};
window.addEvent('domready', function() {
    holder = $('holder');
    url_display = $('url_display');
    inputs = $('inputs').getElementsByTagName('input');

    var ens = ["contrast", "bright", "sharp", "color"];
    var s = $("sliders");

    ens.each(function (slider) {
        var desc = document.createElement('div');
        desc.innerHTML = slider.capitalize();
        
        var area = document.createElement('div');
        area.id = slider;
        area.style.background = "#ccc";
        area.style.height = "10px";
        area.style.width = "200px";
        area.style.marginBottom = "10px";
        
        var knob = document.createElement('div');
        knob.id = [slider, 'knob'].join('_');
        knob.style.height = "10px";
        knob.style.width = "10px";
        knob.style.background = "#000";
        
        s.appendChild(desc);
        desc.appendChild(document.createElement('br'));
        s.appendChild(area);
        area.appendChild(knob);
   
        var sho = new Slider(area, knob, {
            steps: 100,
            onComplete: function (val) {
                slider_vals[slider] = val;
                show();
            }
        }).set(50);
    });
});

get_crop_points = function(e) {
    crop_area.push(e.pageX - holder.offsetLeft);
    crop_area.push(e.pageY - holder.offsetTop);
}

show = function () {
    var values = [];
    for (i = 0; i < inputs.length;  i++){
        if(inputs[i].value != ''){
            values.push([inputs[i].id, inputs[i].value].join('='));
        }
    }
    
    for(k in slider_vals) {
        values.push([k, slider_vals[k]].join('='));
    }
    
    var url = values.join('&');
    url = ['http://superjared.com/imgr/?', url].join('');
    
    while(holder.hasChildNodes()){
        holder.removeChild(holder.firstChild);
    }
    
    img = document.createElement('img');
    img.src = url;
    url_display.innerHTML = url;
    
    cropper = document.createElement('div');
    cropper.id = 'cropper';
    
    holder.appendChild(cropper);
    holder.appendChild(img);
    
    cropper.onmousedown = function (e) {
        if (event.preventDefault) {event.preventDefault();}
        crop_area = [];
        get_crop_points(e);
    }
    cropper.onmouseup = function (e) {
        get_crop_points(e);
        $('crop').value = crop_area.join('x');
        show();
    }
};