var old_id = 1;

/* расстояние между рисунками */
var image_padding_bottom = 20;
/* массив координат Y верхней границы рисунков */
var img_top_pos = new Array();
/* массив высот рисунков */
var img_height = new Array();
/* массив ширины рисунков */
var img_width = new Array();
/* массив размеров минимизированных рисунков */
var img_sm_height = new Array();
/* высота кнопок управления */
var button_height = 20;
/* количество рисунков */
var cnt_im = 0;
/* минимальная высота полосы прокрутки */
var min_panel_height = 100;

var current_img = 0;

/* функция определяет смещение поля с картинками относительно базового блока */
/* ind - порядковый номер рисунка */
function getNewTopPosition(ind) {
    var result = Math.ceil((img_height[ind] - 2 * button_height + 20) / 2) - img_top_pos[ind] - Math.ceil(img_sm_height[ind] / 2) - button_height;
    return result;
}

/* функция скрывает/отображает элементы управления навигацией
   а также изменяет размеры поля со скриншотами
   необходимость скрыть/показать элементы определяется в самой функцие
*/
function displayNavColNavigation() {
    var nav_col_height = img_height[old_id];
    var flag = (img_top_pos[cnt_im] + img_sm_height[cnt_im] + image_padding_bottom > nav_col_height);
    var nav_col = document.getElementById("nav_col_block");
    if (!flag && old_id > cnt_im) {
        old_id = old_id - cnt_im;
        nav_col_height = img_height[old_id];
    }
    if (old_id < cnt_im / 2) {
        old_id = old_id + cnt_im;
    } else if (old_id > 3 * cnt_im / 2) {
        old_id = old_id - cnt_im;
    }
    var display_type = (flag) ? 'block' : 'none';

    if (!flag && !ie) {
        //alert(document.getElementById('nav_col_block').style.marginTop);
        document.getElementById('nav_col_block').style.marginTop = '3px';
    }

    if (cnt_im > 1) {
        for (var i = cnt_im + 1; i <= img_height.length; i++) {
            if (document.getElementById("href_" + i) != null) {
                document.getElementById("href_" + i).style.display = display_type;
            }
        }
        document.getElementById("nav_col_button_up").style.display = display_type;
        document.getElementById("nav_col_button_down").style.display = display_type;
    }

    if (flag) {
        nav_col_height = Math.floor(nav_col_height) - button_height * 2 + 20;
        var top_pos = getNewTopPosition(old_id);
        if (top_pos > 0) {
            old_id = cnt_im + old_id;
            top_pos = getNewTopPosition(old_id);
        }
        document.getElementById("nav_col_block_box").style.top = getNewTopPosition(old_id) + 10 + 'px';
    } else {
        document.getElementById("nav_col_block_box").style.top = '0px';
    }
    if (nav_col_height < min_panel_height) {
        nav_col_height = min_panel_height;
    }
    nav_col.style.height = nav_col_height + 'px';
}

function OnSelectImage(id, flag) {
    if (old_id == id) {
        return false;
    }

/*    if (flag != 1 && id < cnt_im) {
        id = id + cnt_im;
    }
*/
    for (var i = 1; i <= cnt_im * 2; i++) {
        document.getElementById("href_"+i).className = "";
    }

    old_id = id;

    displayNavColNavigation();

    var main_img = document.getElementById("main_img_id");
    main_img.style.visibility = "hidden";
    main_img.src = document.getElementById("im_"+old_id).value;
    main_img.height = img_height[old_id];
    main_img.width = img_width[old_id];

    document.getElementById("href_"+old_id).className = "this_proj";
    if (old_id <= cnt_im) {
        document.getElementById("href_"+(old_id + cnt_im)).className = "this_proj";
    } else {
        document.getElementById("href_"+(old_id - cnt_im)).className = "this_proj";
    }
    document.getElementById("href_"+old_id).blur();

    var im_sm_href = document.getElementById("im_sm_" + old_id).value;
    document.getElementById("fl_scr").style.visibility = (im_sm_href == document.getElementById("main_img_id").src) ? "hidden" : "visible";

    document.getElementById("fl_scr").href = im_sm_href;
    var descr = document.getElementById("desc_" + old_id);
    if (descr != null) {
        document.getElementById("descr").innerHTML = descr.value;
    }

    var height = main_img.height + 30;
    if (ie && document.getElementById('nav_column_id') != null) {
        document.getElementById('nav_column_id').style.height = height + 'px';
    }
    height = height + 40;
    if (ie) {
        height = height + 30;
    }
    if (document.getElementById('popup_viewphoto') != null) {
        document.getElementById('popup_viewphoto').style.height = height + 'px';
    }

    return false;
}

function OnSelectPrev() {
    OnSelectImage((old_id <= cnt_im) ? (old_id - 1 + cnt_im) : (old_id - 1), 1);
}

function OnSelectNext() {
    OnSelectImage((old_id > cnt_im) ? (old_id + 1 - cnt_im) : (old_id + 1), 1);
}
/**** init *****/
function OnLoadPortfolio() {
    cnt_im = parseInt(document.getElementById('cnt_img').value);
    var sHref = "JavaScript:void(0)";
    var el;
    var i, i2;
    el = document.getElementById("fl_scr_im");
    if (el != null) {
        el.href = sHref;
    }
    el = document.getElementById("current_img");
    if (el != null) {
        current_img = parseInt(el.value);
    }

    /* учитываем бордеры рисунков для IE */
    var border = (!ie) ? 0 : 2;

    for (i2 = 0; i2 < 2; i2++) {
        for (i = 1; i < cnt_im + 1; i++) {
            if (!i2) {
                el = document.getElementById("href_" + i);
                if (el != null) {
                    el.href = sHref;
                }
            }
            if (document.getElementById("im_" + (i + i2 * cnt_im)) == null) continue;
            img_sm_height[i + i2 * cnt_im] = parseInt(document.getElementById("im_sm_height_" + (i + i2 * cnt_im)).value) + border;
            img_height[i + i2 * cnt_im] = parseInt(document.getElementById("im_height_" + (i + i2 * cnt_im)).value);
            img_width[i + i2 * cnt_im] = parseInt(document.getElementById("im_width_" + (i + i2 * cnt_im)).value);
            if (i > 1 || i2) {
                img_top_pos[i + i2 * cnt_im] = img_top_pos[i + i2 * cnt_im - 1] + img_sm_height[i] + image_padding_bottom;
            } else {
                img_top_pos[1] = 0;
            }
        }
    }
    el = document.getElementById("href_1");
    if (el != null) {
        el.className = "";
    }
    el = document.getElementById("current_img");
    if (el != null) {
        old_id = parseInt(el.value);
    }

    var but = document.getElementById("close_button");
    if (but != null) {
        but.style.visibility = "visible";
    }
    but = document.getElementById("logo_button");
    if (but != null) {
        but.href = sHref;
    }
    displayNavColNavigation();
    document.getElementById("nav_col_block_box").style.position = "absolute";

    document.getElementById("im_prev").style.visibility = (cnt_im > 1) ? "visible" : "hidden";
    document.getElementById("im_next").style.visibility = (cnt_im > 1) ? "visible" : "hidden";

    el = document.getElementById("im_next");
    if (el != null) {
        el.href = sHref;
    }
    el = document.getElementById("im_prev");
    if (el != null) {
        el.href = sHref;
    }
    document.getElementById("href_"+old_id).className = "this_proj";
    if (old_id <= cnt_im) {
        document.getElementById("href_"+(old_id + cnt_im)).className = "this_proj";
    } else {
        document.getElementById("href_"+(old_id - cnt_im)).className = "this_proj";
    }

    OnSelectImage(old_id, 1);

}