var m_kord;                      // obiekt przesylajacy dany do formularza przy submicie
var kadr;                        // obiekt ramki do wycinania twarzy
var ikona_rozmiar;               // obiekt - uchwyt do rozciagania ramki
var ramka;                       // obiekt nadrzadny - DIV ramowy
var mysz_x_delta;                // delta x - wartola x dla myszy podczas ruchu
var mysz_y_delta;                // delta y - wartola y dla myszy podczas ruchu
var mysz_x_start;                // poczatkowe x myszy przy klikniaciu
var mysz_y_start;                // poczatkowe y dla myszy przy klikniaciu
var kadr_left_start;             // poczatkowa wartość left diva przy klikniaciu
var kadr_top_start;              // poczatkowa wartość top diva przy klikniaciu
var cX = 211;                    // stala wielkosc nozyczek w X
var cY = 211;                    // stala wielkosc nozyczek w Y
var prop = 1   // wartosc proporcji dla nozyczek
var kadr_szerokosc_start = cX;   // poczatkowa wartola dlugolci boku kwadratu
var kadr_wysokosc_start = cY;    // poczatkowa wartola dlugolci boku kwadratu
var m_minX = 0;                  // minimalna granica przesuniacia w X
var m_minY = 0;                  // jw tylko min w Y
var ramka_szerokosc;             // jw. tylko ramka_wysokoscmalna
var ramka_wysokosc;              // jw. tylko max w Y
var m_maxR;                      // maksymalny resizing
var kadr_rozmiar_min = 50;       // minimalny resizing
var m_minX = 0;   // minimalna granica przesuniacia w X
var m_minY = 0;	  // jw tylko min w Y
var m_maxR; 	  // maksymalny resizing
var m_minR = 50;  // minimalny resizing

//funkcja inicjalizujaca
function inicjalizuj_kadrowanie(zdjecie_url, zdjecie_szerokosc, zdjecie_wysokosc, rodzaj){

    if (rodzaj == 1) {
        cX = 211;
        cY = 211;
        prop = 1;
    }

    if (rodzaj == 2) {
        cX = 153;
        cY = 153;
        prop = 1;
    }

    if (rodzaj == 3) {
        cX = 240;
        cY = 80;
        prop = 0.33;
    }
    kadr_szerokosc_start = cX;
    kadr_wysokosc_start = cY;

    ramka_szerokosc = zdjecie_szerokosc;
    ramka_wysokosc = zdjecie_wysokosc;
    document.writeln('<div id="ramka">');
    document.writeln('<div id="kadr"></div>');
    document.writeln('<div id="ikona_rozmiar"></div>');
    document.writeln('</div>');


    ramka = $('ramka');
    ramka.style.width = ramka_szerokosc+"px";
    ramka.style.height = ramka_wysokosc+"px";
    ramka.style.background = 'url('+zdjecie_url+') no-repeat';

    kadr = $('kadr'); // obiekt DIV
    if (navigator.userAgent.indexOf('Opera') == -1){
        $('kadr').style.background = "#fff";
    }
    kadr.style.width = kadr_szerokosc_start+"px";
    kadr.style.height = kadr_wysokosc_start+"px";
    kadr.style.left = (ramka_szerokosc/2) - (kadr_szerokosc_start/2) +"px";
    kadr.style.top  = (ramka_wysokosc/2) - (kadr_wysokosc_start/2) +"px";

	ikona_rozmiar = $('ikona_rozmiar'); // obiekt DIV
	ikona_rozmiar.style.left = (ramka_szerokosc/2) + (kadr_szerokosc_start/2) - 13 +"px";
	ikona_rozmiar.style.top  = (ramka_wysokosc/2) + (kadr_wysokosc_start/2) - 13 +"px";

    Event.observe(kadr, "mousedown", start_ruch, false);
    Event.observe(ikona_rozmiar, "mousedown", start_zmien_rozmiar, false);

    Event.observe(document, "mouseup", zatrzymaj_ruch, false);
    Event.observe(document, "mouseup", zatrzymaj_zmiane_rozmiaru, false);

    Event.observe(document, "mouseup", wyslij_koordynaty, false);
}

//wlaczenie poruszania divem - ustawienie wartosci poczatkowych zmiennych
function start_ruch(e){
    if (typeof e == 'undefined') e = window.event;
    mysz_x_start   = parseInt(Event.pointerX(e));
    mysz_y_start   = parseInt(Event.pointerY(e));
    kadr_left_start = parseInt(kadr.style.left);
    kadr_top_start  = parseInt(kadr.style.top);
    kadr_szerokosc_start = parseInt(kadr.style.width);
    kadr_wysokosc_start = parseInt(kadr.style.height);
    Event.observe(document, "mousemove", ruch, false);
}

//wlaczenie zmiany ikona_rozmiaru diva
function start_zmien_rozmiar(e){
    mysz_x_start   = parseInt(Event.pointerX(e));
    mysz_y_start   = parseInt(Event.pointerY(e));
    kadr_left_start = parseInt(kadr.style.left);
    kadr_top_start  = parseInt(kadr.style.top);
    kadr_szerokosc_start = parseInt(kadr.style.width);
    kadr_wysokosc_start = parseInt(kadr.style.height);
    Event.observe(document, "mousemove", zmien_rozmiar, false);
}

//poruszanie divem, zczytywanie wartosci
function ruch(e){
    mysz_x_delta  = kadr_left_start + parseInt(Event.pointerX(e)) - mysz_x_start; // roznica przesuniecia zuwzglednieniem koord. div
    mysz_y_delta  = kadr_top_start + parseInt(Event.pointerY(e)) - mysz_y_start;
    if(mysz_x_delta <= m_minX) {mysz_x_delta = 0;}
    if(mysz_x_delta >= ramka_szerokosc - kadr_szerokosc_start) {mysz_x_delta = ramka_szerokosc - kadr_szerokosc_start - 3;}
    if(mysz_y_delta <= m_minY) {mysz_y_delta = 0;}
    if(mysz_y_delta >= ramka_wysokosc - kadr_wysokosc_start) {mysz_y_delta = ramka_wysokosc - kadr_wysokosc_start - 3;}

    kadr.style.left = mysz_x_delta+"px";
    kadr.style.top  = mysz_y_delta+"px";

    pomocnicze_x  = parseInt(kadr.style.left) + parseInt(kadr.style.width) - 15; // roznica przesuniecia zuwzglednieniem koord. div
    pomocnicze_y  = parseInt(kadr.style.top) + parseInt(kadr.style.height) - 15;

    ikona_rozmiar.style.left = pomocnicze_x+"px";
    ikona_rozmiar.style.top  = pomocnicze_y+"px";
}

//zmiana ikona_rozmiaru diva
function zmien_rozmiar(e){
    mysz_x_delta  = parseInt(Event.pointerX(e)) - mysz_x_start;
    mysz_y_delta  = parseInt(Event.pointerY(e)) - mysz_y_start;
    mysz_x_delta = kadr_szerokosc_start + mysz_x_delta;
    mysz_y_delta = kadr_wysokosc_start + mysz_y_delta;

    if(kadr_left_start+mysz_x_delta >=ramka_szerokosc) { mysz_x_delta = ramka_szerokosc - kadr_left_start - 3; }
    if(kadr_top_start+mysz_y_delta >=ramka_wysokosc) { mysz_y_delta = ramka_wysokosc - kadr_top_start - 3; }
    if(mysz_x_delta <= kadr_rozmiar_min) {mysz_x_delta = kadr_rozmiar_min;}


    kadr.style.width  = mysz_x_delta+"px";
    kadr.style.height = mysz_x_delta*prop+"px";

    pomocnicze_x  = parseInt(kadr.style.left) + parseInt(kadr.style.width) - 15; // roznica przesuniecia zuwzglednieniem koord. div
    pomocnicze_y  = parseInt(kadr.style.top) + parseInt(kadr.style.height) - 15;

    ikona_rozmiar.style.left = pomocnicze_x+"px";
    ikona_rozmiar.style.top  = pomocnicze_y+"px";

    width  = (ramka_szerokosc/parseInt(kadr.style.width)) * cX;
    height = (ramka_wysokosc/parseInt(kadr.style.height)) * cY;
}

//wylaczenie poruszania div'em
function zatrzymaj_ruch(){
    Event.stopObserving(document, "mousemove", ruch, false);
}

//wylaczenie zmiany rozmiaru
function zatrzymaj_zmiane_rozmiaru(){
	Event.stopObserving(document, "mousemove", zmien_rozmiar, false);
}

//wysylanie danych do form'a
function wyslij_koordynaty(){
    m_kord = $('dane');
    m_kord.value = parseInt(kadr.style.left)+";"+parseInt(kadr.style.top)+";"+parseInt(kadr.style.width)+";"+parseInt(kadr.style.height);
}