//document.write("<style>.animateSet{float:left; margin-left:10px;} .animateX{width:0px; height:100%;margin:0px;}	</style>");					
		
// TODO:  24-07-201
// instead of Full images and Thumb ( i.e 12 Imgs + 12 Thumbs)
// 1st create Thumbs, then pick each thumb to full image  ( i.e 12 Thumbs + 1 image in animation)
	
	$.fn.getImages = function(){
		var args = arguments[0] || {}; // initiate object of arguments		
		var webDir = $(this).attr("webDir");	//$(this).append(webDir);
		var oBox = $(this);		// $(oBox).prepend(location.hostname + "<br/>");
		// alert("begin okok\n"+webDir);
		var onlymages = args.onlymages ? args.onlymages : 'N';
		var cssstyle = args.cssstyle ? args.cssstyle : '';
		var cssclass = args.cssclass ? args.cssclass : 'noclass';
		
		$.ajax({
			url: getScriptPath('csImageShow_ajax.js')+"csImageShow_ajax.php?webDir=" + webDir,	//getScriptPath()  defined in jqanim.js
			dataType: 'json',
			success: function(data){	
						$.each(data, function(i,val){													
							$(oBox).append($("<img />").attr({
								'src': webDir + val.imgsrc,
								'style':cssstyle,
								'class':cssclass
							}));	//display:none;
						});										
					}
		}).complete(function() {
			if(onlymages != 'Y'){
				$(oBox).ammImgThumbs({'beforeafter':'after'});												
			}
		});
	}
	
	$.fn.ammImgThumbs = function(){
		
		var args = arguments[0] || {}; // initiate object of arguments
		var beforeafter = args.beforeafter ? args.beforeafter : 'after';
		// (this) here is enclosing Div for images
		if(beforeafter == "after"){
			$(this).parent().after( "<div class='thumbox div100' style='margin:10px 0 10px 0; text-align:center;' ></div>" );		
		} else {
			$(this).parent().before( "<div class='thumbox div100' style='margin:10px 0 10px 0; text-align:center;' ></div>" );		
		}		
		
		var imgClone = "";
		$(this).children("img").each(function(){
			$(this).jqAmm_imgResize('%','360');
			imgClone = $(this).clone().attr({			//removeClass('jqimgshow').			//.addClass('thumb')
				'class':'thumb',
				'style':'float:none; margin:auto; border:1px solid transparent; width:50px; height:30px; cursor:pointer;',
				'title':''
			});			
			$(".thumbox").append( $(imgClone).fadeTo(0,0.7) );
		});	
		$(this).children("img:first").imgSlideShow();		
		$(".thumb").click(function(){ $(this).thumbClick(); });			// to work later on *******************
	};

	// $.fn.imgSlideShowFromThumb = function(){
		// // alert( $(this).attr('src') );
		// $(this).jqAmm_imgResize('%','360');
		// var oThis = $(this);
		// var oNext = $(this).next("img");
		// // $("[src='"+ $(this).attr('src') +"']").css("border-color","#FF9797");
		// $(".thumb[src='"+ $(this).attr('src') +"']").fadeTo(0,1).css("border-color","black");
		// $(this).show("explode", { direction: "left" }, 300).delay(2000).hide(
			// "drop", { direction: "left" }, 300, function(){				
			// // oThisRemove = $(this).remove();
			// // $("[src='"+ $(this).attr('src') +"']").css("border-color","#999");
			// $(".thumb[src='"+ $(this).attr('src') +"']").fadeTo(0,0.7).css("border-color","transparent");
			// $(oThis).appendTo( $(oThis).parent() );
			// $(oNext).imgSlideShow();
		// });														
	// };	

	
	$.fn.imgSlideShow = function(){
		// alert( $(this).attr('src') );
		
		var oThis = $(this);
		var oNext = $(this).next("img");
		
		// $(this).parent().prepend( "- " + $(this).attr('src') + "<br/>" + $(this).parent().children("img:last").attr('src') + "<br/>" );

			// $(this).parent().prepend(
				// "<hr/>### " + 
				// $(this).attr('src') + "<br/>" +
				// $(this).parent().children("img:last").attr('src') + "<br/>" +
				// $(this).parent().children("img:first").attr('src') + "<br/>"
			// );
			
		if( $(this).attr('src') == $(this).parent().children("img:last").attr('src') ){		
			oNext = $(this).parent().children("img:first");
		}
		
		// $("[src='"+ $(this).attr('src') +"']").css("border-color","#FF9797");
		$(".thumb[src='"+ $(this).attr('src') +"']").fadeTo(0,1).css("border-color","black");
		$(this).show("explode", { direction: "left" }, 300).delay(2000).hide(
			"drop", { direction: "left" }, 300, function(){				
			// oThisRemove = $(this).remove();
			// $("[src='"+ $(this).attr('src') +"']").css("border-color","#999");
			$(".thumb[src='"+ $(this).attr('src') +"']").fadeTo(0,0.7).css("border-color","transparent");
			// $(oThis).appendTo( $(oThis).parent() );
			$(oNext).imgSlideShow();
		});														
	};		
							
	$.fn.thumbClick = function(){
		// alert( $(this).attr('src') );		
		$(".slideimgs").stop(true,true).hide();
		$(".thumb").fadeTo(0,0.7).css("border-color","transparent");
		var oThis = $(this);
		$(".slideimgs[src='"+ $(this).attr('src') +"']").imgSlideShow();
	};