var frame_border = 2;
var IMG_MIN_W = 30;
var IMG_MIN_H = 30;

function normalizeVal(minval, val, maxval){
    return Math.min(Math.max(minval, val), maxval);
}


function flickrserach(){
    new Ajax.Request(
            'fsearch', {
            method:'post',
            postBody: 'user=' + escape($('flickr_user').value) + '&tags=' + escape($('flickr_tags').value),
            onSuccess: function(xmlHttp){
                if(xmlHttp.responseText){
                    var f = $('flickrform');
                    var ow = f.getWidth();
                    var oh = f.getHeight();
                    var co = f.cumulativeOffset();
                    f.style.width  = '700px';
                    f.style.left = (co.left - (f.getWidth() - ow) / 2) + 'px';
                    $('fres').innerHTML = xmlHttp.responseText;
                }
            }
        });
}

function flickrselect(src, id){
    if(src.style.borderTopColor == 'red'){
        src.style.border = '2px solid white';
        $('fsel' + id).value = '';
    }else{
        src.style.border = '2px solid red';
        $('fsel' + id).value = src.src;
    }
}

function showDialog(e, dialogid){
    var d = $(dialogid);
    d.absolutize();
    //d.show();
    d.style.left = Math.round((Event.pointerX(e) - d.getWidth() / 2)) + 'px';
    d.style.top = Math.round((Event.pointerY(e) -  d.getHeight() / 2)) + 'px';
    Effect.SlideDown(dialogid);
}

function hideDialog(src){
    while(src){
        if(Element.extend(src).match('.modaldialog')){
            src.hide();
            return;
        }
        src = src.parentNode;
    }
}

function selectSize(custom){
    var v = $('selsize').value;
    if(v == custom){
        $('customsize').show();
    }else{
        $('customsize').hide();
        $('apply').click();
    }
}

function save_frame(){
    var div = $('imgdiv');
    var w = $('watermark');
    div = div ? {
                id: $('idx').value,
                size: $('selsize').value,
                w: div.getWidth(),
                h: div.getHeight(),
                l: div.positionedOffset().left,
                t: div.positionedOffset().top,
                tr: $('tr').value =='on' ? 1 : 0,
                bg: $('bg').value,
                r: null
            } : ($('idx') ? {
                id: $('idx').value,
                size: $('selsize').value,
                tr: $('tr').value =='on' ? 1 : 0,
                bg: $('bg').value,
                r: null
                } : {});

    $('frame_data').value = Object.toJSON({
        mark: w ? (w.checked ? 1 : 0) : 1,
        morph: $('morph').checked ? 1 : 0,
        order: Sortable.sequence('flist'),
        opts: div
        });
}

function center_frame_image(){
    var img = $('imgdiv');
    img.style.top = '0px';
    img.style.left = '0px';
    img.style.width = Element.extend(img.parentNode).getWidth();
    img.style.height = Element.extend(img.parentNode).getHeight();
}

function showWhileLoad(){
    var w = $('whileload');
    var i = $('whileloadimg');
    var p = Element.extend(w.parentNode);
    w.show();
    w.style.left = '0px';
    w.style.top = '0px';
    w.style.width = p.getWidth() + 'px';
    w.style.height = p.getHeight() + 'px';
    i.style.left = '0px';
    i.style.top = '0px';
    i.style.width = p.getWidth() + 'px';
    i.style.height = p.getHeight() + 'px';
}

function select_frame(id){
    showWhileLoad();
    save_frame();

    new Ajax.Request(
            '/getframe',
            {
                method:'post',
                postBody: 'get='+id+'&frame_data=' + $('frame_data').value,
                onSuccess: function(xmlHttp){
                    var td = $('frametd');
                    td.update(xmlHttp.responseText);
                    var sel = $$('.selected')[0];
                    if(sel) sel.removeClassName('selected')
                    $('sf_' + id).addClassName('selected');
                    $('whileload').hide();
            }
        });
}

function set_selected(idx){
    var f = $('sf_' + idx);
    //var f = $('flist').select('.framepreviev')[idx];
    if(!f) f = $('flist').select('.framepreviev')[0];
    if(!f) return;
    f.addClassName('selected');
    var s = $('flscroll');
    if(!s) return;
    var l = parseInt(f.offsetLeft) + f.getWidth();
    if(l > s.getWidth()){
        s.scrollLeft = l;
    }
}

function addFileUpload(){
    var f = $('uploadfiles');
    var d = new Element('DIV', { 'class': 'addframefrom'});
    d.update($('filetpl').innerHTML);
    f.appendChild(d);
    $('fileupload').show();
}

function addRefUpload(){
    var f = $('uploadfiles');
    var d = new Element('DIV', { 'class': 'addframefrom'});
    d.update($('reftpl').innerHTML);
    f.appendChild(d);
    $('fileupload').show();
}

function addEmptyUpload(){
    var f = $('uploadfiles');
    var d = new Element('DIV', { 'class': 'addframefrom'});
    d.update($('emptytpl').innerHTML);
    f.appendChild(d);
    $('fileupload').show();
}

function removeFrameUpload(src){
    Element.remove(src.parentNode);
    if($('uploadfiles').select('.addframefrom').length < 1) $('fileupload').hide();
}
//*******************************
//*** move frames
function moveImage(e){
    if (!e) e = window.event;
    var obj = $('imgdiv');
    var oldx = Event.pointerX(e);
    var oldy = Event.pointerY(e);

    var cursorwas = obj.style.cursor;
    obj.style.cursor="move";
    document.onmousemove = function (e){
            if (!e) e = window.event;
            e = Event.extend(e);

            setImageXPos(parseInt(obj.style.left) + e.pointerX() - oldx);
            setImageYPos(parseInt(obj.style.top)  + e.pointerY() - oldy);

            oldx = e.pointerX();
            oldy = e.pointerY();

            if (e.preventDefault) e.preventDefault();
            else e.returnValue = false;
        }
    document.onmouseup =  function (e){
            obj.style.cursor= cursorwas;
            document.onmousemove = null;
            document.onmouseup = null;
            document.ondragstart= null;
            document.onselectstart = null;
        }

    document.ondragstart = null;
    document.onselectstart = null;

    if (e.preventDefault) e.preventDefault();
    else e.returnValue = false;
    return true;
}

function setImageXPos(newX){
    var obj = $('imgdiv');
    newX = Math.max(0, Math.min(newX,  $('frame').getWidth() - $('imgdiv').getWidth()));

    obj.style.left = newX + 'px';
    var editx = $('posx');
    if(editx.value != newX)  editx.value = newX;
}

function setImageYPos(newY){
    var obj = $('imgdiv');
    newY = Math.max(0, Math.min(newY,  $('frame').getHeight() - $('imgdiv').getHeight()));

    obj.style.top = newY + 'px';
    var edity = $('posy');
    if(edity.value != newY)  edity.value = newY;
}

function setPosX(){
    var src = $('posx');
    var newX = parseInt(src.value);
    if(isNaN(newX)) newX = 0;
    setImageXPos(newX);
}

function setPosY(){
    var src = $('posy');
    var newY = parseInt(src.value);
    if(isNaN(newY)) newY = 0;
    setImageYPos(newY);
}
//*** move frames
//***************************


//***************************
//*** resize frames
function resizeImage(e, byx, byy){
    if (!e) e = window.event;
    e = Event.extend(e);

    var obj = $('imgdiv');
    var frame = $('frame');

    oldx = e.pointerX();
    oldy = e.pointerY();

    var cursorwas = obj.style.cursor;
    obj.style.cursor="move";
    document.onmousemove = function (e){
            if (!e) e = window.event;
            e = Event.extend(e)
            var imgdiv = $('imgdiv');

            var maxw = Math.min(frame.getWidth(), (byx > 0 ? imgdiv : frame).getWidth()  + byx * parseInt(imgdiv.style.left));
            var maxh = Math.min(frame.getHeight(), (byy > 0 ? imgdiv : frame).getHeight() + byy * parseInt(imgdiv.style.top));

            var nx = e.pointerX();
            var ny = e.pointerY();
            var oldh = imgdiv.getHeight();
            var oldw = imgdiv.getWidth();

            var nw = normalizeVal(IMG_MIN_W, imgdiv.getWidth()  + byx*(oldx - nx), maxw);
            var nh = normalizeVal(IMG_MIN_H, imgdiv.getHeight() + byy*(oldy - ny), maxh);

            //$('log').innerHTML += byy +' '+imgdiv.getHeight() + ' ' + parseInt(imgdiv.style.top) + ' '+ maxh +' '+nh +'<br/>';

            imgdiv.style.width = nw + 'px';
            imgdiv.getElementsByTagName('IMG')[0].style.height = nh + 'px';//ie trouble
            if(byx > 0) imgdiv.style.left = (parseInt(imgdiv.style.left) - (nw - oldw)) + 'px';
            $('width').value = nw;
            $('posx').value = parseInt(imgdiv.style.left);

            imgdiv.style.height = nh + 'px';
            imgdiv.getElementsByTagName('IMG')[0].style.height = nh + 'px';//ie trouble
            if(byy > 0) imgdiv.style.top = (parseInt(imgdiv.style.top) - (nh - oldh)) + 'px';
            $('height').value = nh;
            $('posy').value = parseInt(imgdiv.style.top);

            oldx = nx;
            oldy = ny;

            if (e.preventDefault) e.preventDefault();
            else e.returnValue = false;
        }
    document.onmouseup = function (e){
            obj.style.cursor = cursorwas;
            document.onmousemove = null;
            document.onmouseup = null;
            document.ondragstart= null;
            document.onselectstart = null;
            if (!e) e = window.event;
            if (e.preventDefault) e.preventDefault();
            else e.returnValue = false;
        }

    if (e.preventDefault) e.preventDefault();
    else e.returnValue = false;
}

function setWidth(){
    var field = $('width');
    var w = parseInt(field.value);
    if(isNaN(w)) return;
    var nw = normalizeVal(IMG_MIN_W, w, $('frame').getWidth() - parseInt($('imgdiv').style.left));
    if(w == nw) $('imgdiv').style.width = nw + 'px';
}

function setHeight(){
    var field = $('height');
    var h = parseInt(field.value);
    if(isNaN(h)) return;
    var nh = normalizeVal(IMG_MIN_H, h, $('frame').getHeight() - parseInt($('imgdiv').style.top));
    if(h == nh){
        imgdiv.getElementsByTagName('IMG')[0].style.height = nh + 'px';//ie trouble
        $('imgdiv').style.height = nh + 'px';
    }
}
//*** resize frames
//***************************

//***************************
//*** rotate image
var posx;
var posy;
var obj;
var cursorwas;

function rotateImage(src, e){
    if (!e) e = window.event;
    e = Event.extend(e);
    obj = Element.extend(src);
    cursorwas = src.style.cursor;
    src.style.cursor="move";
    document.onmousemove = onRotateImage;
    document.onmouseup = onRotateImageStop;
}

var wide = 2;
var lastcorner;
var dot_free = new Array();
var dot_used = new Array();
function onRotateImage(e){
    if (!e) e = window.event;
    e = Event.extend(e);

    var a = - calculateA(e) - Math.PI / 2;

    var ocx = $('imgdiv').positionedOffset().left + Math.round($('imgdiv').getWidth() /2);
    var ocy = $('imgdiv').positionedOffset().top + Math.round($('imgdiv').getHeight() /2);

    var h2 = Math.round(obj.getHeight() / 2);
    var w2 = Math.round(obj.getWidth()  / 2);
    var r = Math.sqrt(h2 * h2 + w2 * w2);
    var alpha  = Math.acos(w2 / r) + a;
    var alpha2 = Math.acos(h2 / r) + a + Math.PI / 2;

    var dx1 = Math.abs(r * Math.cos(alpha + a));
    var dy1 = Math.abs(r * Math.sin(alpha + a));
    var dx2 = Math.abs(r * Math.sin(alpha2 + a));
    var dy2 = Math.abs(r * Math.cos(alpha2 + a));

    var dx1 = parseInt(r * Math.cos(alpha));
    var dy1 = parseInt(r * Math.sin(alpha));
    var dx2 = parseInt(r * Math.cos(alpha2));
    var dy2 = parseInt(r * Math.sin(alpha2));
    var x1 = ocx + dx1;
    var y1 = ocy + dy1;
    var x2 = ocx + dx2;
    var y2 = ocy + dy2;
    var x3 = ocx - dx1;
    var y3 = ocy - dy1;
    var x4 = ocx - dx2;
    var y4 = ocy - dy2;

    var pos = 0;
    dot_free = dot_free.concat(dot_used);
    dot_used = new Array();

    drawLine(obj.parentNode, x1,y1,x2,y2, 'red');
    drawLine(obj.parentNode, x2,y2,x3,y3);
    drawLine(obj.parentNode, x3,y3,x4,y4);
    drawLine(obj.parentNode, x4,y4,x1,y1);
    for(var idx = 0; idx < dot_free.length ; idx++){
        dot_free[idx].style.display = 'none';
    }
}

function drawLine(obj,x1,y1,x2,y2,color){
    var lenx = x2 -x1;
    var leny = y2 -y1;
    var len = Math.sqrt(lenx * lenx + leny * leny);
    var steps = Math.ceil(len / 10);
    var step = len / steps;
    var cos = lenx / len;
    var sin = leny / len;

    for(var s = 0; s < steps; s ++){
        var x = Math.round(x1 + step * s  * cos);
        var y = Math.round(y1 + step * s  * sin);

        var dot = dot_free.pop();
        if(!dot){
            dot = new Element('DIV', { 'class': 'rborder'});
            obj.appendChild(dot);
        }

        dot_used.push(dot);

        dot.style.left = (x - Math.round(wide/2)) + 'px';
        dot.style.top = (y - Math.round(wide/2)) + 'px';
        dot.style.backgroundColor = color ? color : 'blue';
        dot.style.display = 'block';
    }
}

function calculateA(e){
    e = Event.extend(e);
    var ex = e.pointerX();
    var ey = e.pointerY();
    var cx = $('imgdiv').cumulativeOffset().left + Math.round($('imgdiv').getWidth() /2);
    var cy = $('imgdiv').cumulativeOffset().top + Math.round($('imgdiv').getHeight() /2);

    var dx = (ex - cx);
    var dy = (-1)*(ey - cy);
    var pi = 3.14;

    var dl = Math.sqrt(dx*dx + dy*dy);
    var a = Math.acos(dx / dl);
    if(dy < 0) a = pi + (pi - a);
    return a;
}


function onRotateImageStop(e){
    if(!e) e = window.event;
    for(var idx = 0; idx < dot_free.length ; idx++){
        Element.remove(dot_free[idx]);
    }
    for(var idx = 0; idx < dot_used.length ; idx++){
        Element.remove(dot_used[idx]);
    }
    dot_free = new Array()
    dot_used = new Array();
    save_frame();

    new Ajax.Request(
        '/rotate', {
        method:'post',
        postBody: 'rotate=' +calculateA(e)+ '&frame_data=' + $('frame_data').value,
        onSuccess: function(xmlHttp){
            if(xmlHttp.responseText){
                var frame = $('frame');
                frame.innerHTML = xmlHttp.responseText;
            }
        }
    });

    if (obj) {
        obj.style.cursor = cursorwas;
        obj = null;
    }
    document.onmousemove = null;
    document.onmouseup = null;
    document.ondragstart= null;
    document.onselectstart = null;
}
//*** rotate image
//***************************
 document.ondragstart= function (){
    //alert('drag');
 };

var advPropRefColor;

function showAdvProp(idx){
    var aprop = $('advprop');
    var aref  = $('advref');
    if(aprop.style.display == 'none' || aprop.style.display == ''){
        aprop.style.display = 'block';
        advPropRefColor = aref.style.color;
        aref.style.color = 'gray';
    }else{
        aprop.style.display = 'none';
        aref.style.color = advPropRefColor
    }

    //var frame = $('frame');
    //var height = frame.getHeight();
    //frame.style.height = (height + 1) + 'px';
    //frame.style.height = height + 'px';
}

function showToGallery(){
    el = $("togallery");
    el.style.display = (el.style.display != "none" ? "none" : "" );
}

function onCSFinish(result){
    hideDialog($('colorPickerDialog'));// colorPickerDialog()
    //$('colorPicker').style.display = "none";
    if(result){
        $('bg').value = result;
        $('bgb').style.background = result;
        if(!$('tr').checked) $('frame').style.background = result;
    }
}

function animSC(event){
    //fnShowChooseColorDlg(); return;
    var value = $('bg').value;
    new Ajax.Request(
        '/color/color_dialog.php',
        {
            method:'get',
            onSuccess: function(xmlHttp){
                $('coloddialogcontainer').update(xmlHttp.responseText);
                showColorChooserDialog('colorPicker', value, onCSFinish);
        }});
    showDialog(event, 'colorPickerDialog');
    //$('colorPickerDialog'),show();
    //showColorChooserDialog(event, 'colorPicker', value, onCSFinish);
}
/*
function onBGColor(){
    value = $('bg').value;
    $('bgb').style.background = value;
    if(!$('tr').checked) $('frame').style.background = value;
}*/

function onTRChange(event){
    if($('tr').value == 'on'){
        $('frame').style.background = '#ffffff';
        $('bgb').hide();
    }else{
        $('frame').style.background = $('bg').value;
        $('bgb').show();;
    }
}


/**from index.php**/

function blockShowHide(src){
        var par = src.parentNode;
        var show = par.getElementsByTagName('DIV')[0];
        if(show.style.display == 'none'){
            par.style.border = '1px solid #d3d3d3';
            show.style.display = 'block';
        }else{
            par.style.border = '0px';
            show.style.display = 'none';
        }
    }

    function updateGallery(src){
        var els = src.parentNode.parentNode.getElementsByTagName('input');
        var gid = els[0].value;
        var hidden = els[1].checked;
        var name = els[2].value;
        var descr = src.parentNode.parentNode.getElementsByTagName('textarea')[0].value;
        var ref = '/agallery?ajax&updatecomment'
            + '&gid=' + encodeURIComponent(gid)
            + '&hidden=' + encodeURIComponent(hidden)
            + '&picname=' + encodeURIComponent(name)
            + '&comment=' + encodeURIComponent(descr);
        src = src.parentNode.parentNode;
        src.innerHTML = 'saving...';

        callAjaxPost(ref, onUpdateGallery, src, '');
    }

    function onUpdateGallery(http, src){
        src.innerHTML = http.responseText;

    }

    function callAjaxPost(urlData, onGetResult, src, data){
        var http;
        if (window.ActiveXObject){
            try {
                http = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }else if (window.XMLHttpRequest){
            http = new XMLHttpRequest();
            if (http.overrideMimeType) {
                http.overrideMimeType('text/html');
            }
        }

        http.resultFunc = onGetResult;

        http.onreadystatechange = function (){
            if(http && http.readyState == 4 && http.status == 200){
                http.resultFunc(http, src);
            }
        };

        http.open("POST", urlData, true);
        http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        http.setRequestHeader("Content-length",data.length);
        http.setRequestHeader("Connection", "close");
        http.send(data);
    }

    function tabselect(src){
        var i;
        var childs = src.parentNode.parentNode.getElementsByTagName('DIV')[1].childNodes;

        var menu = src.parentNode.getElementsByTagName('A');
        var pages = new Array();
        var idx;

        for(i = 0; i < childs.length; i ++){
            if(childs[i].tagName == 'DIV')
                pages[pages.length] = childs[i];
        }

        for(i = 0; i < menu.length; i ++){
            if(menu[i] == src){
                menu[i].className = 'tabselected';
                idx = i;
            }else menu[i].className = '';
        }

        for(i = 0; i < pages.length; i ++){
            if( i == idx) pages[i].style.display = 'block';
            else pages[i].style.display = 'none';
        }
    }

    function tabSelect2(src){
        var i;
        var tab = $(src.parentNode.parentNode);

        var menu = Selector.findChildElements(tab, ['.tabmenu a']);
        var pages = Selector.findChildElements(tab,['.page']);

        for(i = 0; i < menu.length; i ++){
            var cname = 'tabselected';
            if(menu[i] == src){
                Element.addClassName(menu[i], cname);
                pages[i].show();
            }else{
                Element.removeClassName(menu[i], cname);
                pages[i].hide();
            }
        }               
    }

    function commentsPage(src, ref){
        while(src.className != 'pages'){
            src = src.parentNode;
        }
        src = src.parentNode;

        callAjaxPost(ref,
            function (http, com){
                src.innerHTML = http.responseText;
            },
            src, '');

    }