var myFxL; //left button animation
var myFxR; // right button animaton
var imageFx;
var tempX; //actual left mouse position on the document
var tempY; //actual top mouse position on the document
var arrayPos = 0;

//mouse over thumbnail
function thbMouseOver(e) {

    cursor_pointer();
    e.tween('border-color', '#000000');
}

// moude out thumbnail
function thbMouseOut(e) {

    cursor_clear();
    e.tween('border-color', '#999999');
}

// thumbnail click
function thbClick(e) {

    var id = e.getAttribute('name');
    ShowImage(id);
}

// mouse over image
function contMouseOver(el) {

    setButtons(false);
}

// mouse out of image
function contMouseOut(el) {
    document.gPosition = 'INIT';
}



// div button mouse out
function btnMouseOut(el, lr) {


    if (lr == 'left') {
        myFxL.cancel();
        myFxL.start('opacity', 0.01);
    }
    else if (lr == 'right') {
        myFxR.cancel();
        myFxR.start('opacity', 0.01);
    }

}


// div button mouse over
function btnMouseOver(el, lr) {

    if (lr == 'left') {
        myFxL.cancel();
        myFxL.start('opacity', 0.5);
        setButtons(false);
    }
    else if (lr == 'right') {
        myFxR.cancel();
        myFxR.start('opacity', 0.5);
        setButtons(false);
    }
}



// div button click
function btnClick(e, lr) {


    // get images ids from hidden field and split
    var elem = document.getElementById('ctl00_MainContent_hiddenField');
    var valStr = elem.getAttribute('value');
    var myArray = valStr.split(';');
    var length = myArray.length;

    if (lr == 'right') {

        myFxR.cancel();
        myFxR.set('opacity', 0.01);
        arrayPos = arrayPos + 1;
        if (arrayPos == length) {
            arrayPos = 0;
        }
    }
    else if (lr == 'left') {
        myFxL.cancel();
        myFxL.set('opacity', 0.01);
        arrayPos = arrayPos - 1;
        if (arrayPos < 0) {
            arrayPos = length - 1;
        }
    }

    ShowImage(myArray[arrayPos]);

}


function setButtons(opacityChange) {

    var cont = document.getElementById('ctl00_MainContent_CallbackPanel_LargeImage');
    cont.setAttribute('name', 'myimage');
    //alert(cont);

    var btnL = document.getElementById('btnDivL');
    setButton(btnL, cont, 'left');
    var btnR = document.getElementById('btnDivR');

    setButton(btnR, cont, 'right', opacityChange);
}



// sets button divs over image 
function setButton(e, d, lr, oc) {


    var eX = getX(d);
    var eY = getY(d);
    // element size
    var eH = d.offsetHeight;  //+ eY;
    var eW = d.offsetWidth;  //+ eX;
    //margin
    var mar = 80;

   
    if (lr == 'left') {

        // myFxL = new Fx.Tween(e);

        if (oc == true)
            myFxL.set('opacity', 0.01);

        myFxL.set('height', eH);
        myFxL.set('width', mar);
        myFxL.set('left', eX);
        myFxL.set('top', eY);
    }
    else if (lr == 'right') {

        // myFxR = new Fx.Tween(e);

        if (oc == true)
            myFxR.set('opacity', 0.01);

        myFxR.set('height', eH);
        myFxR.set('width', mar);
        myFxR.set('left', eW + eX - mar);
        myFxR.set('top', eY);
    }
}



// init page evensts and set buttons
function InitEvents() {

    // regiser mouse events
    var IE = document.all ? true : false;
    if (!IE) {
        document.captureEvents(Event.MOUSEMOVE);
        // document.captureEvents(Event.MOUSEDOWN);
    }
    document.onmousemove = getMouseXY;
    //  document.onmousedown = mouseDown;

    var btnL = document.getElementById('btnDivL');
    var btnR = document.getElementById('btnDivR');
    var image = document.getElementById('ctl00_MainContent_CallbackPanel_LargeImage');

    myFxL = new Fx.Tween(btnL);
    myFxR = new Fx.Tween(btnR);
    imageFx = new Fx.Tween(image);

    myFxR.set('opacity', 0.01);
    myFxL.set('opacity', 0.01);

    setButtons(true);
}



// show image 
// sends info to server thru callback panel
function ShowImage(id) {
    if (CallbackPanel.InCallback())
        return;

    // get images ids from hidden field and split
    var elem = document.getElementById('ctl00_MainContent_hiddenField');
    var valStr = elem.getAttribute('value');
    var myArray = valStr.split(';');
    
    // find position of image id in ID array
    var pos = -1;
    var i = 0;

    for (i = 0; i < myArray.length; i++) {
        if (myArray[i] == id) {
            pos = i;
            break;
        }
    }

    // assign position to global variable
    arrayPos = pos;
    
    // init fx
    var el = document.getElementById('imageDiv');
    var myFx = new Fx.Tween(el, { duration: 500 });

    // fadeout image and perform callback in chain 
    myFx.start('opacity', 0).chain(
              function() { CallbackPanel.PerformCallback(id); }
            );
}


// after callback fade image in
function FadeImageIn() {

    var el = document.getElementById('imageDiv');
    var myFx = new Fx.Tween(el);
    myFx.set('opacity', 0);
    myFx.start('opacity', 1);
}


// fade out div with entire gallery
function FadeOut() {

    $('galleryForm').fade('out');
}


// fade gallery div in and initiate e
function FadeIn(e) {

    // ukryj loader

//    $('loaderDiv').set('opacity', 0);

//    // pokaz forme
//    var el = document.getElementById('ctl00_MainContent_galleryForm');
//    var myFx = new Fx.Tween(el);

//    myFx.set('opacity', 0);

//    myFx.start('opacity', 1).chain(
//              function() { this.set('opacity', 1); }
//            );

    InitEvents(e);

}


// HELPER FUNCTIONS - COMMON JS

// gets id of elem
function getId(e) {
    e.getAttribute('id');
}
// Changes the cursor to an hand
function cursor_pointer() {
    document.body.style.cursor = 'pointer';
}

// Returns the cursor to the default pointer
function cursor_clear() {
    document.body.style.cursor = 'default';
}





// gets mouse position
function getMouseXY(e) {

    // get mouse position when mouse moves and save in global fields
    var IE = document.all ? true : false;
    if (IE) { // grab the x-y pos.s if browser is IE
        window.tempX = event.clientX + document.body.scrollLeft;
        window.tempY = event.clientY + document.body.scrollTop;
    }
    else {  // grab the x-y pos.s if browser is NS
        window.tempX = e.pageX;
        window.tempY = e.pageY;
    }
    if (window.tempX < 0) { window.tempX = 0; }
    if (window.tempY < 0) { window.tempY = 0; }
    return true;
}

// gets position Y of element
function getY(oElement) {
    //gets absolute Y position of element
    var iReturnValue = 0;
    while (oElement != null) {
        iReturnValue += oElement.offsetTop;
        oElement = oElement.offsetParent;
    }
    return iReturnValue;
}

// gets position X of element
function getX(oElement) {
    //gets absolute X position of element
    var iReturnValue = 0;
    while (oElement != null) {
        iReturnValue += oElement.offsetLeft;
        oElement = oElement.offsetParent;
    }
    return iReturnValue;
}