var right_arrow;
var left_arrow;
var container;
var slider;
var con;
var divs;
var speed = 1000;


function showImage(idx)
{
    var img = $("#central_image");
    var big_img = $("#b_img");
    big_img.hide();
    img.attr('src', images[idx].big);
    $('a#big_img_link').attr('href', images[idx].link_img);
    big_img.fadeIn(speed);
//    alert(images[idx].link_img);
//    var a = img.parent('a').get(0);
 //   $(a).attr('href', images[idx].big);
}

function showImage_h(idx)
{
    var img = $("#central_image");
    var big_img = $("#b_img");
    big_img.hide();
    img.attr('src', images_h[idx].big);
    big_img.fadeIn(speed);
//    var a = img.parent('a').get(0);
 //   $(a).attr('href', images[idx].big);
}

function init_container(container, count, offset) {
    for (i=images.length - 1 - offset; i > images.length - 1 - offset - count; i--)
    {
        var el = document.createElement("div");
        el = $(el);
        el.addClass('back_img');

        var img = "";
        img += "<a  ><img src='"+(images[i].img)+"' onclick='showImage("+i+")'></a>";

        el.html(img);
        container.append(el);
    }
}

function create_img_div(index, hidden) {
    return '<div class="back_img" '
        + (hidden ? 'style="display: none;"' : '')
        + '><a  ><img src="' + images[index].img + '" onclick="showImage('
        + index + ')"></a></div>';
}

function initializePage()
{
	var arr_len = images.length;

    var container = $("#left_sc");
    var container_top = $("#header_left_sc");

    var img_big = $("#central_image");
	img_big.attr('src',images[arr_len-1].big);

	var container_len = 3;
	var container_top_len = 1;

    init_container(container_top, container_top_len, 0);
    init_container(container, container_len, container_top_len);

    var current_first_index = arr_len - 1;

    $('#down_arrow').click(
    	function()
    	{
            current_first_index = (current_first_index + 1) % arr_len;

            var new_down_scroller_top_index = (current_first_index - container_top_len + arr_len) % arr_len;

    	    var new_down_scroller_top = create_img_div(new_down_scroller_top_index, false);
            $(new_down_scroller_top).prependTo(container);

            var new_up_scroller_top = create_img_div(current_first_index, true);;
            $(new_up_scroller_top).prependTo(container_top);

	        $('div:first', container_top).fadeIn(speed);
	        $('div:last', container_top).remove();

	        $('div:last', container).remove();
       	}
    );
    $('#up_arrow').click(
    	function()
    	{
            current_first_index = (current_first_index - 1 + arr_len) % arr_len;

            var new_down_scroller_last_index = (current_first_index - container_top_len - container_len + 1 + arr_len) % arr_len;

    	    var new_down_scroller_last = create_img_div(new_down_scroller_last_index, true);
            $(new_down_scroller_last).appendTo(container);

	        $('div:first', container_top).remove();
            var new_up_scroller_top = create_img_div(current_first_index, false);
            $(new_up_scroller_top).appendTo(container_top);

            $('div:first', container).remove();
            $('div:last', container).fadeIn(speed);
        }
    );
}
function initializePage1()
{
	var arr_len = images.length;
    container = $("#left_sc1");

	var n,n1,j=0;
    for (i=(arr_len-1); i >= 0; i--)
    {
        var el = document.createElement("div");
        el = $(el);
        el.addClass('back_img');

        var img = "";
        img += "<a  href='"+(images[i].link_img)+"'><img src='"+(images[i].img)+"' /></a>";
        //alert(img);
        el.html(img);
        container.append(el);
        n=i;
        if(j == 6)
        {
        	break;
        }
        j++;


    }
     n1=n;
     --n1;
 //   alert(n);
 //   alert(n1);
    $('#down_arrow').click(
    	function()
    	{
    		if(images.length-1 < n)
    		{
    			n=0;
    		}

	        var img = "";
	        img = "<div class='back_img' style='display: none;'><a href='"+(images[n++].link_img)+"' ><img src='"+(images[n-1].img)+"'  /></a></div>";
	        $(img).prependTo(container);
	        var first = $('div:first', container);
	        first.fadeIn("slow");

	        var last = $('div:last', container);
	        last.remove();
	        if(images.length-1 < n1)
    		{
    			n1=0;

    		}
    		n1++;

    	}
    );
    $('#up_arrow').click(
    	function()
    	{
    		//alert(n1);
    		if(0 > n1)
    		{
    			n1=images.length-1;
    		}
    		//alert(n1);
	        var img = "";
	        img = "<div class='back_img' style='display: none;'><a href='"+(images[n1--].link_img)+"' ><img src='"+(images[n1+1].img)+"'  /></a></div>";

	        $(img).appendTo(container);

	        var last = $('div:last', container);
	        last.fadeIn("slow");

	        var first = $('div:first', container);
	        first.remove();
    		if(0 > n)
    		{
    			n=images.length-1;
    		}
    		n--;
    	}
    );
}
function initializePage2()
{
	var arr_len = images.length;
    container = $("#left_center");

	var n,j=0;
    for (i=(arr_len-1); i >= 0; i--)
    {

        var el = document.createElement("div");
        el = $(el);
        el.addClass('left_small_img2');

        var img = "";
        img += "<a  ><img src='"+(images[i].img)+"' onclick='showImage("+(arr_len-1)+")'/></a>";

        el.html(img);
        container.append(el);
        n=i;
        if(j == 5)
        {
        	break;
        }
        j++;
    }
     n1=n;
     --n1;
    $('#down_arrow').click(
    	function()
    	{
    		if(images.length-1 < n)
    		{
    			n=0;
    		}
	        var img = "";
	        img = "<div class='left_small_img2' style='display: none;'><img src='"+(images[n++].img)+"' onclick='showImage("+(n-1)+")'></div>";
	        $(img).prependTo(container);
	        var first = $('div:first', container);
	        first.fadeIn("slow");

	        var last = $('div:last', container);
	        last.remove();
	        if(images.length-1 < n1)
    		{
    			n1=0;

    		}
    		n1++;
    	}
    );
    $('#up_arrow').click(
    	function()
    	{
    		if(0 > n1)
    		{
    			n1=images.length-1;
    		}
	        var img = "";
	        img = "<div class='left_small_img2' style='display: none;'><img src='"+(images[n1--].img)+"' onclick='showImage("+(n)+")'></div>";
	        $(img).appendTo(container);
	        var last = $('div:last', container);
	        last.fadeIn("slow");

	        var first = $('div:first', container);
	        first.remove();
    		if(0 > n)
    		{
    			n=images.length-1;
    		}
    		n--;
    	}
    );
}
function initializePage_h()
{
    container = $("#ImageContainer");

    for (i=0; i<images_h.length; i++)
    {
        var el = document.createElement("div");
        el = $(el);
        el.css('float', 'left');

        var img = "";
        img += "<img src='"+(images_h[i].img)+"' style='margin-left: 2px; float: left; border-top: 2px solid #FFF; border-bottom: 2px solid #FFF; border-left: 1px solid #FFF; border-right: 1px solid #FFF;cursor: pointer;' onclick='showImage_h("+i+")'>";

        el.html(img);
        container.append(el);

    }

    right_arrow = $('#right_arrow');
    right_arrow.bind('click', moveRight);
    left_arrow = $('#left_arrow');
    left_arrow.bind('click', moveLeft);

    divs = $('div', container);
}

function moveLeft()
{
    removeHandlers();

    var first = $('div:first', container);

    first.animate({
        width: '0'
    }, 300, undefined, function(){
        container.append(first);
        first.css('width', 97);
        attachHandlers();
    });
}

function moveRight()
{
    removeHandlers();

    var first = $('div:first', container);
    if (parseInt(first.css('width')) < 97)
    {
        var last = first;
    }
    else
    {
        var last = $('div:last', container);
        last.css('width', 0);
        container.prepend(last);
    }

    last.animate({
        width: '97'
    }, 300, undefined, function(){
        attachHandlers();
    });
}

function removeHandlers()
{
    divs.stop();
}

function attachHandlers()
{

}

function slide(e)
{
    removeHandlers();

    // Right
    if (con.offset().left + con.width()/2 <= e.pageX)
    {
        var repeat = function() {
            var first = $('div:first', container);
            if (parseInt(first.width()) < 97)
            {
                var last = first;
            }
            else
            {
                var last = $('div:last', container);
                last.css('width', 0);
                container.prepend(last);
            }

            last.animate({
                width: '97'
            }, 1500, undefined, repeat);

        };

        con.bind('mouseout', cleanSlide);

        repeat();
    }
    // Left
    else
    {
        var repeat = function() {
            var first = $('div:first', container);
            if (parseInt(first.width()) <= 0)
            {
                container.append(first);
                first.css('width', 97);
                first = $('div:first', container);
            }

            first.animate({
                width: 0
            }, 1500, undefined, repeat);

        };

        con.bind('mouseout', cleanSlide);

        repeat();
    }
}

function cleanSlide()
{
    $('div', container).stop();

    con.unbind('mouseout', cleanSlide);
    attachHandlers();
}