var photoData = {categoryId:'38',pageCount:'3',imageDirectory:'http://localhost/JewerlyWeb/images/magazines/',pages:[
 {pageIndex:'1',images:[
    
     {imageUrl:'cover-s.jpg',imageId:3},{imageUrl:'cover-s.jpg',imageId:3},{imageUrl:'3273_002.jpg',imageId:3},  {imageUrl:'3273_002.jpg',imageId:3},{imageUrl:'cover-s.jpg',imageId:3},{imageUrl:'cover-s.jpg',imageId:3},{imageUrl:'cover-s.jpg',imageId:3},{imageUrl:'cover-s.jpg',imageId:3},{imageUrl:'cover-s.jpg',imageId:3}
    ]
 },
  {pageIndex:'2',images:[
    
     {imageUrl:'diamond.jpg',imageId:3},{imageUrl:'diamond.jpg',imageId:3},{imageUrl:'diamond.jpg',imageId:3},  {imageUrl:'diamond.jpg',imageId:3},{imageUrl:'diamond.jpg',imageId:3},{imageUrl:'diamond.jpg',imageId:3},{imageUrl:'diamond.jpg',imageId:3},{imageUrl:'diamond.jpg',imageId:3},{imageUrl:'diamond.jpg',imageId:3}
    ]
 }
 ]
};



 var imageTemplateStr= '<div class="comm_sectionImage">'+
                            '<div class="imgShadow">'+
                                '<a href="javascript:showBigPhoto()">'+
                                    '<img style="width:120px;height:120px;" imageId="#{imageId}" bigImageUrl="#{bigImageUrl}" alt="" src="#{imageUrl}" /></a></div>'+
                            '<div class="magazineNavigation">'+
                                '<a class="rightArrow" href="javascript:delete_photo()"><span >#{deleteTitle}</span></a>'+
                            '</div>'+
                        '</div>';
 var imageTemplate = new Template(imageTemplateStr);    

function showBigPhoto(){}
function delete_photo(){}


var PhotoListing =Class.create();
PhotoListing.prototype ={
initialize: function(container,data)
{

   
   this.data = data;
   this.pages = data.pages;
   
   this.container = $(container);
   this.pager = new ListingPager(data.pageCount);
   this.pageIndex = this.pager.selectedIndex;
   this.pager.onPageChange = this.changePage.bindAsEventListener(this);
   
   this.setImageUrls();
 
   
   this.createImages();
   
  

   
},

clear:function()
{
  this.container.innerHTML = "";
  this.pager.clear();
},
//form image.jpg to http://localhost/JewerlyWeb/images/magazines/image.jpg
setImageUrls:function()
{
    for(var i=0;i<this.pages.length;i++)
   {
         for(var j=0;j<this.pages[i].images.length;j++)
         {
             var imageData =   this.pages[i].images[j];
               imageData.bigImageUrl =  this.data.imageDirectory +imageData.imageUrl; 
             imageData.imageUrl  = this.data.imageDirectory +"small_"+imageData.imageUrl;
        if(isAdmin)
             imageData.deleteTitle = DELETE_PHOTO;
           
         }
   }
   
   
},
changePage:function(pageIndex)
{
   this.pageIndex = pageIndex;
   this.createImages();
},

createImages:function()
{
 var imagesHtml = [];
 
  var images = this.pages[this.pageIndex-1].images;  
   for(var i=0;i<images.length;i++)
   {
      var imageData = images[i];  
      if(!imageData.removed)
      {
       var  listingImage  = new ListingImage(this.container,imageData);      
       imagesHtml.push(listingImage.renderToString())
      }
   }
   this.container.innerHTML = imagesHtml.join('');
   this.container.onclick = this._onImageClicked.bindAsEventListener(this);
},

_onImageClicked:function(e)
{
  var el=Event.element(e);
  
  if(el.tagName.toLowerCase()=="img")
  {
     if(this.onImageClicked) this.onImageClicked(el);
  }
  if(el.tagName.toLowerCase()=="span")
  {
      if(!isAdmin) return;
       if(confirm(ASK_IF_USER_WANT_TO_DELETE_PHOTO))
       {
       
         var div = el.parentNode.parentNode.parentNode;
         var id = div.getElementsByTagName("img")[0].getAttribute("imageId");
          div.parentNode.removeChild(div);
          this.removeItemFromDataByImageId(id);          
         if(this.onDeleteClick) this.onDeleteClick(id);
       }
   //  if(this.onImageClicked) this.onImageClicked(el);
  }
},
removeItemFromDataByImageId:function(id)
{
    for(var i=0;i<this.pages.length;i++)
   {
         for(var j=0;j<this.pages[i].images.length;j++)
         {
             var imageData =   this.pages[i].images[j];
             if(parseInt(imageData.imageId) == parseInt(id))
             {
                imageData.removed=true;
             }
           
         }
   }
}


}


function ChangePage(){}
var ListingPager =Class.create();

ListingPager.prototype ={

initialize: function(pageCount)
{
    this.container = $("gallery_pages");
    if(isAdmin)
    this.container.style.bottom ="-40px";
    
    this.selectedIndex = 1;
    this.pageCount=pageCount;
    this.template =new Template("<a href='javascript:ChangePage(#{pageNumber});'>#{pageNumber}</a>")
    this.selectedTemplate =new Template("<b>#{pageNumber}</b>")
    this.render();    
},
clear:function()
{
   this.container.innerHTML = "";
},
render:function()
{
  if(this.pageCount==1) return;
   var html = [];
   html.push(this.selectedTemplate.evaluate({pageNumber:1}));
   for(var i=1;i<this.pageCount;i++)
   {
      html.push(  this.template.evaluate({pageNumber:i+1}));
   }
   this.container.innerHTML = html.join('');
   
   this.setEventHandlers();
},
setEventHandlers:function()
{
   var childs = this.container.childNodes;
   for(var i=0;i<childs.length;i++)
   {
       if(childs[i].tagName.toLowerCase()=="a")
       {
          childs[i].onclick = this._onPageChange.bindAsEventListener(this);
       }
   }
},
_onPageChange:function(e)
{
   var el = Event.element(e);
   var selectedPageIndex  = el.innerHTML;
   
   Element.replace(this.container.childNodes[this.selectedIndex-1],this.template.evaluate({pageNumber:this.selectedIndex}));
   
   this.selectedIndex =selectedPageIndex;
   Element.replace(el,this.selectedTemplate.evaluate({pageNumber:selectedPageIndex}));
   this.setEventHandlers();
   
  if(this.onPageChange) this.onPageChange(this.selectedIndex);
}


}

var ListingImage =Class.create();

ListingImage.prototype ={
initialize: function(container,data)
{
    this.container = container;
    this.data = data;
},
renderToString:function()
{
  var  str = imageTemplate.evaluate(this.data);
  return str;
}
}