(function (projects) {
    
    var $contentArea,
        $popupArea,
        PAGE_SIZE = 6; 
    
    var init = function() {
      $contentArea = $('#content-area');
      $popupArea = $('#popup-area');
      
      $popupArea.delegate('.jcarousel-item img', 'click', function(e) {
    	// update the image
    	  var $imgShowcase = $('#img-showcase'),
    	      $this = $(this); 
    	  $this.parents('ul').find('.selected').removeClass('selected');
    	  $this.addClass('selected');
    	  $imgShowcase.fadeOut(200, function() {
    		 $imgShowcase.attr({
				 'src'	:	$this.attr('src'),
				 'alt'	:	$this.attr('alt')
    		 });
    		 $imgShowcase.fadeIn(200); 
    	  });
      });
    };

    var paginate = function(data, pageNum) {
    	var pageCount = data.Items.length / PAGE_SIZE,
    		$pager = $('<div class="pager" />'),
    		linkUrl = '#/' + idw.route.getUrl('controller') + '/' + idw.route.getUrl('action') + '/';
    	
    	if (pageCount < 1) {
    		return null;
    	} 
    	for (var i = 0; i < pageCount; i++) {
    		var className = (i == pageNum-1) ? 'selected' : '';   		
    		$pager.append('<a href="' + linkUrl + (i+1) + '" class="' + className + '" title="Page ' + (i+1) + '">' +(i+1) + '</a>');
    	}
    	
    	pagingObj = {
    		el:	$pager,
    		data:	{
    					Items: data.Items.slice((pageNum-1) * PAGE_SIZE, pageNum * PAGE_SIZE) 
    				}
    	};
    	return pagingObj;
    	
    };
    
    var hydrateGrid = function(url, page) {
        idw.transition.next = null;
        idw.transition.newEl = null;
    	
        if (idw.route.getPrevious('action') !== idw.route.getUrl('action')) {
        	$contentArea.find('.pager').hide();
        }
        
        idw.transition.toGrid($contentArea);
        
        idw.dataCache.get(url, function (data) {
        	if (data.Items) {
            	// paging
        		if (page) {
	        		var pagingObj = paginate(data, page);
	        		
	        		idw.transition.newEl = $.tmpl('GridContent', pagingObj ? pagingObj.data : data);
	        		
	        		idw.transition.next = function() {
	        			$contentArea.html(idw.transition.newEl);
	        			if (pagingObj) {
	        				$contentArea.append(pagingObj.el);
	        			}
	        		}
        		} else {
	        		idw.transition.newEl = $.tmpl('GridContent', data);
	        		idw.transition.next = function() {
	        			$contentArea.html(idw.transition.newEl);
	        		}

        		}
        	}
        });    	
    };
    
    // to share with products
    projects.hydrateGrid = hydrateGrid;
    
    $(document).ready(init);
        
    projects.featured = function (page) {
    	hydrateGrid('/projects/featured/', page);
    };
    projects.interiors = function (page) {
    	hydrateGrid('/projects/interiors/', page);
    };  
    projects.design  = function (page) {
    	hydrateGrid('/projects/design/', page);
    };         
    projects.cultural  = function (page) {
    	hydrateGrid('/projects/cultural/', page);
    };    
    projects.architectural  = function (page) {
    	hydrateGrid('/projects/architectural/', page);
    };
    
    projects.all = function () {
        idw.transition.next = null;
        idw.transition.newEl = null;
        
        idw.transition.toContent($contentArea);
        
         idw.dataCache.get('/projects/all/', function (data) {
         	idw.transition.newEl = $.tmpl('ListContent', data); 
    	  	idw.transition.next = function() {
    	  		$contentArea.html(idw.transition.newEl); 
    	  	}
        	 
         });
    };   
    
    projects.detail = function(id) {
      idw.transition.next = null;
      idw.transition.newEl = null;
      
      idw.transition.toContent($popupArea, function() {
      	var $imgCarousel = $('#img-carousel'); 
      	$imgCarousel.jcarousel();
      	  // Share This
          if (typeof stLight !== 'undefined') {
              stLight.onReady();
      	}

      });
      
      idw.dataCache.get('/projects/detail/?Id=' + id, function (data) {
    	idw.transition.newEl = $.tmpl('ProjectDetailPopup', data); 
	  	idw.transition.next = function() {
	  		$popupArea.html(idw.transition.newEl); 
	  	}
      });
    };
    


})(idw.projects = idw.projects || {});