$(document).ready(function(){        
	$('.sjimg li img').on('click',function(){
		var src = $(this).attr('alt');
		var img = '<img src="' + src + '" class="img-responsive"/>';
		
		//start of new code new code
		var index = $(this).parent('li').index();   
		
		var html = '';
		html += img;                
		html += '<div style="height:25px;clear:both;display:block;">';
		//html += '<a class="controls next" href="'+ (index+2) + '">next &raquo;</a>';
		//html += '<a class="controls previous" href="' + (index) + '">&laquo; prev</a>';
		html += '</div>';
		
		$('#mymodal').modal();
		$('#mymodal').on('shown.bs.modal', function(){
			$('#mymodal .modal-body').html(html);
			//new code
			$('a.controls').trigger('click');
		})
		$('#mymodal').on('hidden.bs.modal', function(){
			$('#mymodal .modal-body').html('');
		});
		
		
		
		
   });	
    $('.sjivideo li img').on('click',function(){
		var src = $(this).attr('alt');
		var img = '<video width="100%" height="100%" controls="controls" class="video_w1" ><source src="' + src + '" type="video/mp4" /></video>';
		//var img = '<img src="' + src + '" class="img-responsive"/>';
		
		//start of new code new code
		var index = $(this).parent('li').index();   
		
		var html = '';
		html += img;                
		html += '<div style="height:25px;clear:both;display:block;">';
		//html += '<a class="controls next" href="'+ (index+2) + '">next &raquo;</a>';
		//html += '<a class="controls previous" href="' + (index) + '">&laquo; prev</a>';
		html += '</div>';
		
		$('#mymodal').modal();
		$('#mymodal').on('shown.bs.modal', function(){
			$('#mymodal .modal-body').html(html);
			//new code
			$('a.controls').trigger('click');
		})
		$('#mymodal').on('hidden.bs.modal', function(){
			$('#mymodal .modal-body').html('');
		});

		
   });	       
        

})
        
         
$(document).on('click', 'a.controls', function(){
	var index = $(this).attr('href');
	//var src = $('ul.sjimg li:nth-child('+ index +') img').attr('alt');     
	var src = $(this).parent('li:nth-child('+ index +') img').attr('alt');   
	  
	$('.modal-body img').attr('src', src);
	var newprevindex = parseint(index) - 1; 
	var newnextindex = parseint(newprevindex) + 2; 
	
	if($(this).hasclass('previous')){               
		$(this).attr('href', newprevindex); 
		$('a.next').attr('href', newnextindex);
	}else{
		$(this).attr('href', newnextindex); 
		$('a.previous').attr('href', newprevindex);
	}
	
	var total = $('ul.sjimg li').length + 1; 
	//hide next button
	if(total === newnextindex){
		$('a.next').hide();
	}else{
		$('a.next').show()
	}            
	//hide previous button
	if(newprevindex === 0){
		$('a.previous').hide();
	}else{
		$('a.previous').show()
	}
	
	
	return false;
});