var prefix = 'muvidu_cropper_';
var orgImageWidth;
var orgImageHeight;
var borderWidth = 0;
var borderHeight = 0;

function trigger()
{
            if(borderWidth == 0 || borderHeight == 0)
            { 
                alert('Devam edebilmek için telefon modelini seçmen gerek.'); 
                return false;
            }
            var image = $(prefix + 'image');
            var percentage = (image.height / orgImageHeight);
            var inlineBorder = $(prefix + 'inline_border');
            var editArea = $(prefix + 'edit_area');
            var editAreaHeight = editArea.getHeight();
            var editAreaWidth = editArea.getWidth();
            muvidu_picture_resize(
                ( ((editAreaWidth - borderWidth) / 2)  - Position.positionedOffset(image)[0]) / percentage,
                ( ((editAreaHeight - borderHeight) / 2) - Position.positionedOffset(image)[1]) / percentage,
                borderWidth,
                borderHeight, 
                borderWidth / percentage,
                borderHeight / percentage
            );
}
function setInlineBorder(width, height)
{
    var inlineBorder = $(prefix + 'inline_border');
    var container = $(prefix + 'edit_area');
    var containerHeight = container.getHeight();
    var containerWidth = container.getWidth();
    if(width > containerWidth || height > containerHeight)
        { alert('Daha kucuk bir boyut girmelisiniz'); return false;}
    if(width == 0)
        { width = inlineBorder.getWidth() - 4; }
    else if(height == 0)
        { height = inlineBorder.getHeight() - 4; }
    inlineBorder.setStyle({ 
        'position': 'absolute', 
        'border': '2px solid #000', 
        'width': width + 'px', 
        'height': height + 'px',
        'left': (Position.positionedOffset(container)[0] +  (container.getWidth() - width) / 2) + 'px',
        'top': (Position.positionedOffset(container)[1] + (container.getHeight() - height) / 2) + 'px'
    });
    $(prefix + 'overlayN' ).setStyle({
        'height': ((containerHeight - height) / 2) + 'px',
        'width': containerWidth + 'px',
        'left': Position.positionedOffset(container)[0] + 'px',
        'top': Position.positionedOffset(container)[1] + 'px'
    })
    $(prefix + 'overlayS').setStyle({
        'height': (containerHeight - height) / 2 + 'px',
        'width': containerWidth + 'px',
        'left': Position.positionedOffset(container)[0] + 'px',
        'top': (Position.positionedOffset(container)[1] + containerHeight - ((containerHeight - height) / 2)) + 'px' 
    })
    $(prefix + 'overlayW').setStyle({
        'height': height + 'px',
        'width': ((containerWidth - width) / 2) + 'px',
        'left': Position.positionedOffset(container)[0] + 'px',
        'top': (Position.positionedOffset(container)[1] + ((containerHeight - height) / 2)) + 'px' 
    })
    $(prefix + 'overlayE').setStyle({
        'height': height + 'px',
        'width': ((containerWidth - width) / 2) + 'px',
        'left': (Position.positionedOffset(container)[0] + ((containerWidth - width) / 2) + width) + 'px',
        'top': (Position.positionedOffset(container)[1] + ((containerHeight - height) / 2))  + 'px' 
    });
    borderWidth = width;
    borderHeight = height;
    $('muvidu_width').value = width;
    $('muvidu_height').value = height;

}
function imageCropper(container, url, slider_handle, slider_track, ImageWidth, ImageHeight)
{
    var width = 0;
    var height = 0;
    $(container).InnerHTML = '';

    var containerHeight = $(container).getHeight();
    var containerWidth = $(container).getWidth();

    orgImageWidth = ImageWidth;
    orgImageHeight = ImageHeight;        
        
    var editArea = Builder.node('div', {'id': prefix + 'edit_area'})
        
    var inlineBorder = Builder.node('div', {'id': prefix + 'inline_border'})
    
    var overlayN = Builder.node('div', {'id': prefix + 'overlayN', 'class': prefix + 'overlay'}); 
    var overlayE = Builder.node('div', {'id': prefix + 'overlayE', 'class': prefix + 'overlay'}); 
    var overlayS = Builder.node('div', {'id': prefix + 'overlayS', 'class': prefix + 'overlay'}); 
    var overlayW = Builder.node('div', {'id': prefix + 'overlayW', 'class': prefix + 'overlay'});

    var image = Builder.node('img', {'src': url, 'id': prefix + 'image'});
    $(container).appendChild(editArea);
    $(editArea).setStyle({
        'overflow': 'hidden',
        'position': 'relative',
        'height': containerHeight + 'px',
        'width': containerWidth + 'px',
        'left': '0',
        'top': '0',
        'background': 'url(./images/pattern.gif)'
    });
    
    $(inlineBorder).setStyle({ 
        'position':'absolute', 
        'border':'2px solid #000', 
        'z-index':'2000', 
        'width': width + 'px', 
        'height': height + 'px',
        'left': (Position.positionedOffset(editArea)[0] +  (containerWidth - width) / 2) + 'px',
        'top': (Position.positionedOffset(editArea)[1] + (containerHeight - height) / 2) + 'px'
    });
    
    $(container).appendChild(inlineBorder);
    
    $(image).setStyle({
        'z-index':'0'
    });
    $(editArea).appendChild(image);
    $(container).appendChild(overlayN);
    $(overlayN).setStyle({
        'opacity': '0.5',
        'filter': 'alpha(opacity=50)',
        'z-index': '1000', 
        'height': ((containerHeight - height) / 2) + 'px',
        'width': containerWidth + 'px',
        'left': Position.positionedOffset(editArea)[0] + 'px',
        'top': Position.positionedOffset(editArea)[1] + 'px'
    });
    $(container).appendChild(overlayS);
    $(overlayS).setStyle({
        'opacity': '0.5',
        'filter': 'alpha(opacity=50)',
        'z-index': '1000', 
        'height': (containerHeight - height) / 2 + 'px',
        'width': containerWidth + 'px',
        'left': Position.positionedOffset(editArea)[0] + 'px',
        'top': (Position.positionedOffset(editArea)[1] + containerHeight - ((containerHeight - height) / 2)) + 'px' 
    });
    $(container).appendChild(overlayW);
    $(overlayW).setStyle({
        'opacity': '0.5',
        'filter': 'alpha(opacity=50)',
        'z-index': '1000', 
        'height': height + 'px',
        'width': ((containerWidth - width) / 2) + 'px',
        'left': Position.positionedOffset(editArea)[0] + 'px',
        'top': (Position.positionedOffset(editArea)[1] + ((containerHeight - height) / 2)) + 'px' 
    });
    $(container).appendChild(overlayE);
    $(overlayE).setStyle({
        'opacity': '0.5',
        'filter': 'alpha(opacity=50)',
        'z-index': '1000', 
        'height': height + 'px',
        'width': ((containerWidth - width) / 2) + 'px',
        'left': (Position.positionedOffset(editArea)[0] + ((containerWidth - width) / 2) + width) + 'px',
        'top': (Position.positionedOffset(editArea)[1] + ((containerHeight - height) / 2))  + 'px' 
    });
    if(orgImageHeight > orgImageWidth)
    {    
        scaleBy = 'height'; 
        minSliderValue = height;
        maxSliderValue = orgImageHeight;
    }    
    else
    { 
        scaleBy = 'width';
        minSliderValue = width;
        maxSliderValue = orgImageWidth;
    }
    DraggableImage = new Draggable(prefix + 'image', {
        'handle': container,
        'zindex': '0', 
        'starteffect': null, 
        'endeffect': null
    });
    Slider = new Control.Slider(slider_handle, slider_track,{
        'sliderValue': maxSliderValue,
        'range': $R(minSliderValue,maxSliderValue),
        'onSlide':function(v){
            if('width' == scaleBy)
            {
                $(image).width = v;
                $(image).height = orgImageHeight * (v / orgImageWidth);
            }
            else
            {
                $(image).height = v;
                $(image).width = orgImageWidth * (v / orgImageHeight);
            }
        }
    });
    $(prefix + 'edit_area').makeClipping();
}