var loader = jQuery('<div id="loader" class=".center"><img src="/images/loader.gif" alt="loading..." /></div>')
			.css({position: "absolute", top: "50%", left: "40%","z-index": 6})
			.hide()
			.appendTo("#modal_div");

//loader.show();

function LoadImage(img,href){

//    checkLoad = function (){
//        //alert("go");
//        if(img.complete){
//            // do something
//            alert("loaded");
//        }else{
//            //img.attr("src","/images/loader.gif");
//            setTimeout("checkLoad()", 10)            
//        }
//    }
        
    img.load( function(){loader.hide();});
    img.attr("src",href);
    
    
        
    //im =  document.getElementById("big_img_container");
    //im.complete = false;
    //im.src = href;

    if(img.complete){
        //alert('complite');
        loader.hide();
    } else
    {
        
        //alert('not complite');
        loader.show()    
    }
    //checkLoad(); 
} 

function ImageCycler(images_array,img_id,prev_next_id)
{
    
    this.img_id = img_id;
    this.prev_next_id = prev_next_id;
    this.cycler = new Cycler(images_array,0);
    var self = this;
    
    
    this.draw_prev_next_control = function(prev_id,next_id,container_id,cur_id)
    {
        //make html
        
        
        $(container_id).empty();
        $("<a href='#'><<</a><span> : </span>").click(self.build_click_act(prev_id)).appendTo(container_id);
        //$("&nbsp;").appendTo(container_id);
        $("<a href='#'>>></a>").click(self.build_click_act(next_id)).appendTo(container_id);
        
        $("<span> : "+(cur_id+1)+" θη "+self.cycler.get_len()+"</span>").appendTo(container_id);
    }
    
    this.build_click_act = function(img_id)
    {
        
        return function()
        {
            self.set_image(img_id);
        }
    }
    
    
    this.draw_image = function(container_id, image_href)
    {
        //make mage
        
        //$(container_id).attr("src",image_href);
        //alert('new');
        LoadImage($(container_id),image_href);
    }
    
    this.set_image = function(id)
    {
        
        self.cycler.set_pos(id);
        
        self.draw_prev_next_control(self.cycler.get_prev(),self.cycler.get_next(),self.prev_next_id,self.cycler.get_pos());
        self.draw_image(self.img_id,self.cycler.get_elem());
    }
    
    this.set_image(0);
}

function Cycler(arr,pos)
{
    
    this.arr = arr;
    this.pos = pos;
    var self = this;
    
    this.get_len  = function()
    {
        return self.arr.length;
    }
    
    this.get_pos = function()
    {
        return self.pos;
    }
    
    this.set_pos = function(pos)
    {
        self.pos = pos;
    }
    
    this.get_elem = function()
    {
        
        return self.arr[self.pos];
    }
    
    this.get_prev = function()
    {
        
        if (self.pos <=0)
            return (self.arr.length-1);
            
        return self.pos-1;
    }
    
    this.get_next = function()
    {
        
        if (self.pos >= (self.arr.length-1))
        {
            return 0;
        } else
            return self.pos+1; 
    }
    
}