(function(){
/**
* @extends Backbone.View
* @requires  portalGGA.models.Draws
* @view
*/
portalGGA.views.ImageCarousel = Backbone.View.extend(
/** @lends  portalGGA.views.PhotoGallery.prototype */{
/**
* Rename object, and render on init.
* @author mulleti.satyanarayana@gtech.com
* @param {Object} options 
*/
constructor: function ImageCarousel(options){

Backbone.View.apply(this, arguments);
var self = this;
self.el = options.el;
self.titleArr = options.titleArr;
self.descArr = options.descriptionArr;
self.pathArr = options.pathArr;
self.thumbDim = options.thumbDimensions;
self.carouselDim = options.carouselDimensions;  
self.imageObj = options.imageObj;

self.facebookId  = options.facebookId; 
self.blobArr = options.imageBlobArr; 
   
    

self.gallery(self.el);  

var hashData = self.photoswipeParseHash();  


if(hashData.gid && hashData.gid == self.el) {
var hashElements =  self.parseThumbnailElements(hashData.gid); 
self.openPhotoSwipe(hashData.pid-1,hashElements,hashData.gid,true); 
  
}    
}, 
/**
* Render all games from collection, bind click.
* @author mulleti.satyanarayana@gtech.com
* @return {jQuery} #$el
*/


gallery: function gallery(gId){
var self=this;   

var imageCarouselId= "imgCarousel_"+self.el; 
   

self.$imageCarouselsmodal = $("#"+imageCarouselId);  
 
self.$imageCarouselsmodal.html(imageCarouselTemplate({htmlId:gId,titleArr: self.titleArr,descArr: self.descArr,pathArr: self.pathArr,thumbsDim: self.thumbDim, carouselDim: self.carouselDim,imageObj:self.imageObj,blobArr: self.blobArr }));     
var $id = $('[data-gallery="'+gId+'"]');   

  var currentClass = "nj-gallery__thumb--current";
 
self.$imageCarousel =$('[data-gallery="'+gId+'"]').find($('[data-pd="nj-gallery__main-carousel"]'));
self.$detailsCarousel  = $('[data-gallery="'+gId+'"]').find($('[data-pd="nj-gallery__photo-details"]'));
self.$galleryNav = $('[data-gallery="'+gId+'"]').find($('[data-pd="nj-gallery__nav-gallery"]')); 
      self.$imageThumbs = self.$galleryNav.find("[data-thumb]");
      var count = self.$imageThumbs.length;
      var ratio = 1.5; 
    
self.imgitems=[];  
 


if(self.titleArr!=null)
      self.imgitems = self.getItems(self.titleArr); 
      else
        self.imgitems = self.getItems(null); 
      
      if(self.imgitems != null) 
self.imgitems = portalGGA.utils._sortByValue(self.imgitems, "index", "asc");          
   

 

var slickMainFrame = {
lazyLoad: 'ondemand',  
centerPadding: 0,
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
prevArrow: "<div class='carousel-prev slick-arrow'><img src='/content/dam/portal/images/icons/slider-arrow-left.png'></div>",
nextArrow: "<div class='carousel-next slick-arrow'><img src='/content/dam/portal/images/icons/slider-arrow-right.png'></div>",
fade: false,   
infinite: false,
asNavFor: '[data-gallery="'+gId+'"] .nj-gallery_slide'
};

var slickNav = {
lazyLoad: 'ondemand', 
centerPadding: 0,
slidesToShow: 2,
slidesToScroll: 2,
dots: false, 
arrows: true, 
vertical: true,
verticalSwiping: true,
infinite: false,
prevArrow: "<div class='carousel-prev slick-arrow'><span class='glyphicon glyphicon-chevron-up'></span></div>",
nextArrow: "<div class='carousel-next slick-arrow'><span class='glyphicon glyphicon-chevron-down'></span></div>",
focusOnSelect: false
}; 




self.$imageThumbs.on("click", function(e){
e.stopPropagation();
var idx = $(this).data("thumb");
self.$imageCarousel.slick("goTo", idx);
 
self.$imageThumbs.removeClass(currentClass);
$(this).addClass(currentClass);  
});

  

self.$imageCarousel.on("afterChange", function() {
 
   
var slideNo = self.$imageCarousel.find('.slick-active').attr('data-slick-index');  

var currentThumb = self.$galleryNav.find('[data-thumb='+(parseInt(slideNo))+']');  
 
self.$imageThumbs.removeClass(currentClass);
  
currentThumb.addClass(currentClass);
 
var goTo = parseInt((slideNo/3));   
    
self.$galleryNav.slick("goTo",goTo);      
  
   
  
});

  

     
 
$('[data-gallery="'+gId+'"] [data-pd="viewLargeImage"]').on('click',function(){
var galleryNo = $(this).attr('data-index');

     self.openPhotoSwipe(galleryNo,self.imgitems,gId);   
    
  

}); 

self.$imageCarousel.slick(slickMainFrame);
self.$detailsCarousel.slick(slickMainFrame);
self.$galleryNav.slick(slickNav);
         
self.$imageThumbs.height(self.$imageThumbs.width() / ratio); 
    
  
self.$galleryNav.find('[data-thumb="0"]').addClass(currentClass); 

var galleryHolderTemp = $("#galleryHolderTemp").html();
$("body").append(galleryHolderTemp); 
 
},
 

photoswipeParseHash : function photoswipeParseHash() {
        var hash = window.location.hash.substring(1),
          params = {};
          if(hash.length < 5) { // pid=1
              return params;
          }
          var vars = hash.split('&');
          for (var i = 0; i < vars.length; i++) {
              if(!vars[i]) {
                  continue;
              }
              var pair = vars[i].split('=');  
              if(pair.length < 2) {
                  continue;
              }           
              params[pair[0]] = pair[1];
          }
         // if(params.gid) {
          //  params.gid = parseInt(params.gid, 10);
          //}
          if(!params.hasOwnProperty('pid')) {
              return params; 
          }
          params.pid = parseInt(params.pid, 10);
          return params;
      }, 

openPhotoSwipe : function openPhotoSwipe(num,imgitems,galleryUID,fromURL) {

var self=this; 

var pswpElement = document.querySelectorAll('.pswp')[0];
 

var n = parseInt(num);
 
// build items array
var items = imgitems;     
   
var url_facebook = "https://www.facebook.com/dialog/share?app_id="+self.facebookId+"&href={{url}}&picture="+encodeURIComponent(location.origin+items[n].src)+"&description={{text}}";    
     
// define options (if needed) 
var options = {     
 galleryUID: galleryUID,   
index: n,   
// history & focus options are disabled on CodePen        
 shareButtons: [
                 {id:'facebook', label:'Share on Facebook', url:url_facebook}, 
                {id:'twitter', label:'Tweet', url:'https://twitter.com/intent/tweet?text={{text}}&url={{url}}'},
                // {id:'pinterest', label:'Pin it', url:'http://www.pinterest.com/pin/create/button/'+
                                                    // '?url={{url}}&media={{image_url}}&description={{text}}'},
                {id:'download', label:'Download image', url:'{{raw_image_url}}', download:true}
            ], 

focus: false   

};  
   
  

var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
   
 

gallery.init();
var psIndex = gallery.getCurrentIndex();
        var psIndexSlick = psIndex;
var afterChange;
 
gallery.listen('afterChange', function() { 
 afterChange= true;
          var psIndex = gallery.getCurrentIndex();
          var psIndexSlick = psIndex; 

          self.$imageCarousel.slick( "goTo", psIndexSlick+1);     
        });
gallery.listen('gettingData', function(index, item) { 

var n = parseInt(index);  
          var psIndex = gallery.getCurrentIndex();

              if(afterChange!= true)  { 
self.$imageCarousel.slick("goTo",parseInt(psIndex));

}      
else{

self.$imageCarousel.slick("goTo",parseInt(index));     
  
}   
    
});  
     
   

},
   

getItems : function getItems(titleArr) {  
var self=this; 
 var carouselImgs = []; 
 var titlearray = titleArr;
 
_.each(self.imageObj,function(img,i){

var $href  = img.path; 


var indexVal = parseInt(i);    
//var dataSize= $(this).data('size');
var  imgHeight = img.height;
 var  imgWidth= img.width;
 var titleIndex = indexVal+1;

var  $title = "Gallery Dreams" +" " +titleIndex; 
     
 var item = {
src : $href,
w   : parseInt(imgWidth),  
h   : parseInt(imgHeight),  
index : indexVal 
    
   
}  
 
  if(titlearray[i] !=  null)
  item.title=titlearray[i]; 
 
carouselImgs.push(item);
 
   

}); 

return carouselImgs;      
},

parseThumbnailElements : function parseThumbnailElements(galleryId) {

        var  items = [],item;  
        var buttonClass =galleryId +" .nj-gallery__main-carousel button";
        var imgClass = galleryId +" .nj-gallery__main-carousel img";
        var detailClass= galleryId +' .nj-gallery__photo-details-inner h3'; 
            
            var numNodes=  $('.'+buttonClass).length;  
            var imgLength = $('.'+imgClass).length;  
            var imgItems=[];
             
            for(var i =0; i <imgLength ; i++){
                       if($('.'+imgClass)[i].alt.indexOf("carousel_image")!= -1){
                        var srcVal = $('.'+imgClass)[i].src;
                        imgItems.push(srcVal); 
                        
                        }
            }  
                
                

        for(var i = 0; i < numNodes; i++) {
           var dataSize = $('.'+buttonClass)[i].getAttribute("data-size")

           var srcVal = imgItems[i];

           
          var index = $('.'+buttonClass)[i].getAttribute("data-index");
          var w = dataSize.split("X")[1];
          var h = dataSize.split("X")[0];
          var title = $('.'+detailClass)[i];
           
                      item = {
                src: srcVal,
                w: parseInt(w),
                h: parseInt(h),
                index : parseInt(index)+1,
                title : title.innerHTML
            }; 
  
  
            items.push(item);
        }

        return items;
    }  
 
 

 
});
}())