var _gallery

function renderCollection(gallery){
	
	//log(gallery)
	
	MagicThumb.options = {
			  'expand-speed':'100',
			  'background-opacity' : '90',
			  'background-color':'#000',
			  'buttons':'show'
	}
	var s;
	
	if(collectionIndex>8){
		s="<div id='thumbs'><ul id='slider1'>";
		for(i=0;i<(collectionIndex);i++){
			s+="<li class='pager' style='width: 110px; float: left; list-style: none outside none;'><a id='" + i +
			"'><img width='75px' height='113px' src='" + collectionArray[i].thumb_src + "'/></a><div class='clear'></div></li>"
		}
		s+="</ul></div>"
		
	}else{
		s="<div id='thumbs-noslider'><ul id='thumb-nails'>";
	    for(i=0;i<(collectionIndex);i++){
			s+="<li class='pager' style='width: 110px; float: left; list-style: none outside none;'><a id='" + i +
			"'><img width='75px' height='113px' src='" + collectionArray[i].thumb_src + "'/></a><div class='clear'></div></li>"
		}
		s+="</ul>"
	
		if(collectionIndex>1){
			s+="<div class=' no-slider bx-pager' style='padding-top:0;padding-top:21px !important;margin-right: 34px;height:0'>" 
		    for(i=0;i<(collectionIndex);i++){
		    	if (i==0)
		    		s+="<span class='pager-link pager-" + (i +1) + " pager-active'></span>"
		    	else
		    		s+="<span class='pager-link pager-" + (i +1) + "'></span>"
		    }
			s+="</div>"
		}	

		s+="</div>"
	
	}

	s+="<div id='sub-content'><div id='large'><span></span><a href='" + collectionArray[0].superzoom_src + "' class='MagicZoom' rel='zoom-width:360px;zoom-height:480px' id='Zoomer'><img id='largeImg' src='" + collectionArray[0].large_src + "'/>" + 
		"</a></div>"
	s+="<div id='zoom'><div class='outer'><p class='title'>" + collectionArray[0].large_title + "</p><p class='desc'>" +  
		collectionArray[0].large_desc + "</p></div>"  
	s+="<span class='zoom'><a href='" + collectionArray[0].zoom_src + "' class='MagicThumb'><div class='click_div'><p>Click for larger image</p><img class='click_image' src='media/imgs/app/zoom.png' alt=''/></div></a></span></div>"
	
	
	s+="<div id='meta'>" + renderRightHandNav(0,gallery)

	document.title="Trehearne & Brar Pashmina Shawls: " + _gallery
	
	s+="<div class='filler'></div>"
	s+="<div class='info'><p id='titleinfo'>"  +  collectionArray[0].style_title  + " INFO:</p><div class='desc'>" + collectionArray[0].style_desc + "</div></div>"
	s+="</div></div>"
		
	$('#content').html(s);
	
	if(collectionIndex>8){
	    $('#slider1').bxSlider({
	        speed: 500, 
	        pager: true,
	        infiniteLoop:false/*,
	        onAfterSlide: function(currentSlide, totalSlides){
	        	refreshImageDetails(currentSlide,gallery)
	        	activeCarouselImage(currentSlide)
        }   */
	    });
	}else{
		   switch(collectionIndex){
	    	case 1:
	    		$('#thumb-nails').css("margin-left", "386px")
	    		break;  		
	    	case 2:
	    		$('#thumb-nails').css("margin-left", "369px")
	    		break;  		
	    	case 3:
	    		$('#thumb-nails').css("margin-left", "313px")
	    		break;  		
	    	case 4:
	    		$('#thumb-nails').css("margin-left", "257px")
	    		break;  		
	    	case 5:
	    		$('#thumb-nails').css("margin-left", "204px")
	    		break;  		
	    	case 6:
	    		$('#thumb-nails').css("margin-left", "152px")
	    		break;  		
	    	case 7:
	    		$('#thumb-nails').css("margin-left", "96px")
	    		break;  		
	    	case 8:
	    		$('#thumb-nails').css("margin-left", "51px")
	    		break;  		
	    	default:
	    		$('#thumb-nails').css("margin-left", "51px")
	    		break;  		
	    }
	}
    $('.bx-wrapper').css('width','882px')
    $('.bx-window').css('width','873px')
	
   	
    $('.pager a').bind('click', function(e) {
    	e.preventDefault();
    	$(".bx-pager .pager-link").removeClass('pager-active');
    	$('.pager-link').eq(this.id).addClass('pager-active');
    	refreshImageDetails(this.id,gallery)
    	activeCarouselImage(this.id)
    });
    $('.pager a').bind('mouseenter mouseleave', function(e) {
    	$(this).toggleClass('hover');
    });
    $('.no-slider span').bind('mouseenter mouseleave', function(e) {
    	$(this).toggleClass('hover');
    });
    $("bx-pager .pager-link").bind('click',function(){
    	id=$(this).attr('class').replace(/\D/g,'')
      refreshImageDetails(id-1,gallery)
    	activeCarouselImage(id-1)
    });
     
    $(".no-slider span").bind('click',function(){
      id=$(this).attr('class').replace(/\D/g,'')
      refreshImageDetails(id-1,gallery)
    	activeCarouselImage(id-1)
    	$('.no-slider span').removeClass('pager-active');
    	$(this).addClass('pager-active')
    });
 
    $(".pager-link").text("");

    MagicThumb.refresh();
    MagicZoom.refresh();
    
}

function refreshImageDetails(id,gallery){
   $("#largeImg").attr('src',collectionArray[id].large_src)
	$("#zoom .title").html(collectionArray[id].large_title)
	$("#zoom .desc").html(collectionArray[id].large_desc)
	$(".MagicThumb").attr('href',collectionArray[id].zoom_src)
	
	var meta=renderRightHandNav(id,gallery)
   	
	document.title="Trehearne & Brar Pashmina Shawls: " + _gallery
	
   $("#meta #partof").html(meta)
	
	$("#meta #titleinfo").html(collectionArray[id].style_title + " INFO:") 
	$("#meta .desc").html(collectionArray[id].style_desc)
	
	//log("refreshImageDetails " + collectionArray[id].thumb_id)
	
	MagicThumb.refresh();
   MagicZoom.refresh();
	$("#Zoomer").attr('href',collectionArray[id].superzoom_src)
	$(".pager-link").text("");

}

function activeCarouselImage(id){
	
	if(collectionIndex>8){
		$('#slider1 .pager a img').removeClass('active');
		$("#slider1 .pager #" + id + " img").addClass('active')
	}else{
		$('#thumb-nails .pager a img').removeClass('active');
		$("#thumb-nails .pager #" + id + " img").addClass('active')
	}
}


function renderRightHandNav(id,gallery){
	$.ajax({
		url: 'shawl/' + collectionArray[id].thumb_id + "/json",
		type: "GET",
		dataType: "json",
		async:false,
		success: function(data) {
			rhn="<div id='partof'><ul><li class='title'><p>PART OF:</p></li>"
			for( var i in data.galleries){
				if (gallery==undefined){
					_gallery="This Season"
					if(i==0)
						rhn+="<li><p><a class='selected' href='shawls#collection/" + data.galleries[i].restfulTitle + "'>" + data.galleries[i].title + "</a></p></li>" 
					else
						rhn+="<li><p><a href='shawls#collection/" + data.galleries[i].restfulTitle + "'>" + data.galleries[i].title + "</a></p></li>" 
				}else{
					if(gallery==data.galleries[i].restfulTitle){
						rhn+="<li><p><a class='selected' href='shawls#collection/" + data.galleries[i].restfulTitle + "'>" + data.galleries[i].title + "</a></p></li>"
						_gallery=data.galleries[i].title
					}
					else
						rhn+="<li><p><a href='/shawls#collection/" + data.galleries[i].restfulTitle + "'>" + data.galleries[i].title + "</a></p></li>" 
				}
					
			}
			rhn+="</ul></div>" 
		}
	});
	
	return rhn;
}