// JavaScript Document
(function ( $ ) {
var counter = 0; var precheck = 0;
    $.fn.imagemanager = function(options) {
		var setting = $.extend({
				ajaxLink :window.location.href,
				ajaxSearchLink:window.location.href,
				addButtonText:"Add Images",
				addButtonClass:"btn btn-blue btn-block",
				multiSelect: false,
				ittrateItem: {},
				defImage: undefined,
				inputTagName: "imager[]"
				
					
				
			},options);
			
			
			 var imagemodalbox =  '<div class="imageparker modal" aria-hidden="false">' +
                 '<div class="modal-dialog">' +
                   '<div class="modal-content">' +
                     '<div class="modal-header">' +
                       '<button type="button" class="close" data-dismiss="modal" aria-hidden="true" tabindex="-1">&times;</button>' +
                       '<h4>Image Picker</h4>' +
					   '<form action="'+setting.ajaxSearchLink+'" id="searcher" method="POST">'+
					   '<div class="form-group">'+
                                                        '<span class="input-icon">'+
                                                            '<input name="search" type="text" class="form-control input-sm" placeholder="Type tag and press enter">'+
                                                            '<i class="glyphicon glyphicon-search danger circular"></i>'+
                                                        '</span>'+
                                                    '</div>'+
                    '</form>'+
					 '<div class="iname alert alert-info fade">'+
                                            '<i class="fa-fw fa fa-info"></i>'+
                                            '<strong>Loading</strong> Please wait...!'+
											'<i class="fa-fw fa fa-refresh fa-spin pull-right"></i>'+
                                        '</div>'+
					 '</div>' +
					 
					
					
                     '<div class="modal-body imageparker-body">' +
                      
                        
                     '</div>' +
                     '<div class="modal-footer">' +
                       '<button href="#" class="btn btn-primary imageparker-image-btn " >Add</button>' +
                     '</div>' +
                   '</div>' +
                 '</div>' +
               '</div>';
var addbutton ='<div class="row"><div class="col-md-2 col-sm-2"><button type="button" class="'+setting.addButtonClass+' image-adder">'+setting.addButtonText+'</button></div></div>';
var imagebox = '<div class="row"><div class="col-md-12 col-sm-12"><div class="rectengi"><ul class="thumbnails image_picker_adaptor"></ul></div></div></div>';
			
		if(!this.parents("body").hasClass('imageparker'))
        this.parents("body").append(imagemodalbox);
		
		$dialog = $(".imageparker");
		$(this).append(addbutton);
		$(this).append(imagebox);
		
		if(Object.keys(setting.ittrateItem).length>0)
		{
			
			var keys = Object.keys(setting.ittrateItem);
			for(var i=0; i<keys.length;i++)
			{
				var linker = '<li>'+
					'<div class="thumbnail"><img class="image_picker_image" src="'+setting.ittrateItem[keys[i]]+'" /><input type="hidden" name="'+setting.inputTagName+'" value="'+keys[i]+'" />'+
					'<div class="control-group">'+
                                                '<div class="radio">'+
                                                    '<label>'+
                                                        '<input name="df_set" type="radio" class="colored-blue to_set" value="'+keys[i]+'" >'+
                                                        '<span class="text">Set Default</span>'+
                                                    '</label>'+
                                                '</div>'+
                                               
					'</div>'+
					'</div>'+
					'<i class="fa  fa-times-circle"></i>'+
					'</li>' ;
					
					
				$(".rectengi .thumbnails").append(linker);
				if(setting.defImage!=undefined){
				$(".to_set" ).each(function(){
					if($(this).val()==setting.defImage)
					$(this).attr("checked","checked");
					});
				}
			}
		}
		
		if(setting.multiSelect==false)$('input[name="df_set"]').attr("checked","checked");
		
		$('.image-adder').click(function(){
			
			
			 $.ajax( {
                  url:setting.ajaxLink+"/0",
				  dataType:"html",
                  success:function(data) {
                     $(".imageparker").modal();
					 $dialog.find('.imageparker-body').append(data);
                  	$dialog.find('.imageparker-body').append('<button class="btn btn-primary btn-block re-search"  type="button">Load More...</button>');
				  
				  }
               });
			   
			
			});

		$('body').on("click",".re-search",function(){
			
			var dm = $(this);

			counter = $(".image_picker_image").length;

			$.ajax( {
                  url:setting.ajaxLink+"/"+counter,
                  beforeSend:function(){dm.remove();},
				  dataType:"html",

                  success:function(data) {
                     $(".imageparker").modal();
					
					 if(data == "complete")
								{
									if(counter==0)
									 $dialog.find('.imageparker-body').insertAfter('<h3>No image found, <a href="media/images" > please add Images</a></h3>');
									
								}
								else{
									 $dialog.find('.imageparker-body').append(data);
									$dialog.find('.imageparker-body').append('<button class="btn btn-primary btn-block re-search"  type="button">Load More...</button>');

								}
                  	
				  
				  }
               });

		});
			
			$('.imageparker-body').on("click",".thumbnail",function(){
				if(setting.multiSelect)
				{
					if(!$(this).hasClass('selected'))
					$(this).addClass("selected");
					else
					$(this).removeClass("selected");
				}
				else
				{
					$(".thumbnail").removeClass("selected");
					$(this).addClass("selected");
				}
			});
		$(".imageparker-image-btn").click(function(){
			if($(".selected").length<=0)
				{alert("please select image"); return;}
				$(".selected").each(function(){
					var linker = '<li>'+
					'<div class="thumbnail"><img class="image_picker_image" src="'+$(this).find("img").attr("src")+'" /><input type="hidden" name="'+setting.inputTagName+'" value="'+$(this).find("img").attr("data-tag")+'" />'+
					
					'<div class="control-group">'+
                                                '<div class="radio">'+
                                                    '<label>'+
                                                        '<input name="df_set" type="radio" class="colored-blue" value="'+$(this).find("img").attr("data-tag")+'" >'+
                                                        '<span class="text">Set Default</span>'+
                                                    '</label>'+
                                                '</div>'+
                                               
					'</div>'+
					
					'</div>'+
					
					
					'<i class="fa  fa-times-circle"></i>'+
					'</li>' ;
					if(setting.multiSelect==false)
					{
						$(".rectengi .thumbnails").empty().append(linker);
						$('input[name="df_set"]').attr("checked","checked");
					}
					else
						$(".rectengi .thumbnails").append(linker);
					$(".imageparker").modal('hide');
			});
			
		
		
		});
		$("body").on("click",".image_picker_adaptor li i",function(){
		
			$(this).parents("li").remove();
		
		});
		
		$("#searcher").submit(function(e){
		e.preventDefault();	
		dilo = $(this);
		 $.ajax( {
                  url:dilo.attr("action"),
				  beforeSend: function(){$(".iname").addClass("in");},
				  method:dilo.attr("method"),
				  data:dilo.serialize(),
				  dataType:"html",
				  complete: function(){$(".iname").removeClass("in");},
                  success:function(data) {
                     $dialog.find('.imageparker-body').html(data);

                     if(dilo.find("input[name]").val()=="")
                     	$dialog.find('.imageparker-body').append('<button class="btn btn-primary btn-block re-search"  type="button">Load More...</button>');
                  	
				  
				  }
               });
			
		});
		
        return this;
    };
 
}( jQuery ));