<!-- plupload file -->

<!-- background size file for IE8-->
<script type="text/javascript" src="plupload/js/background_size_ie.js"></script>
<script type="text/javascript">
	$(function(){
		$(".uploaded_img").css({backgroundSize: "contain"});
	});

</script>

<script type="text/javascript" src="plupload/js/plupload.full.min.js"></script>
<script type="text/javascript" src="plupload/js/jquery.plupload.queue/jquery.plupload.queue.min.js"></script>
<link rel="stylesheet" href="plupload/js/jquery.plupload.queue/css/jquery.plupload.queue.css" type="text/css" />

<script type="text/javascript">

	// Initialize the widget when the DOM is ready
	$(function() {

		<?php foreach($pluploader as $uploader){ ?>

		// Setup html5 version
		var uploader_<?=$uploader["name"]?> = $("#uploader_<?=$uploader["name"]?>").pluploadQueue({
			// General settings
			runtimes : 'html5,flash,html4',
			url : 'plupload/upload_post.php',
			//chunk_size : '1mb',
			rename : false,
			dragdrop: false,
			multiple_queues: true,
			filters : {
				// Maximum file size
				max_file_size : '<?=$uploader["max_file_size_client"]?>',
				// Specify what files to browse for
				mime_types: [
					<?php if($uploader["upload_type"] == 1){ ?>
					{title : "Image files", extensions : "jpg,gif,png"}
					<?php } else if($uploader["upload_type"] == 2){ ?>
					{title : "PDF files", extensions : "pdf"}
					<?php } else if($uploader["upload_type"] == 3){ ?>
					{title : "Word/Excel/Powerpoint files", extensions : "doc,docx,xls,xlsx,ppt,pptx"}
					<?php } else if($uploader["upload_type"] == 4){ ?>
					{title : "Image files", extensions : "jpg,gif,png"},
					{title : "PDF files", extensions : "pdf"},
					{title : "Word/Excel/Powerpoint files", extensions : "doc,docx,xls,xlsx,ppt,pptx"}
					<?php } else {} ?>

				]
			},

			multipart_params: {
				uploader_id: '<?=$uploader["name"]?>',
				max_file_size_server: '<?=$uploader["max_file_size_server"]?>',
				upload_type: '<?=$uploader["upload_type"]?>'
			},

			// Flash settings
			flash_swf_url : 'plupload/js/Moxie.swf',

			// Silverlight settings
			silverlight_xap_url : '/plupload/js/Moxie.xap',

			init : {

				FileUploaded: function(up, file, response) {
					var count_file =$( "#uploaded_img_<?=$uploader["name"]?> .img_frame" ).length;

					var json = $.parseJSON(response.response);
					/*					console.log(response);
					 console.log(up);
					 console.log(file);*/

					if(json.success == "1"){

						$("#uploaded_img_<?=$uploader["name"]?>").show();

						$("#uploaded_img_<?=$uploader["name"]?>").append(function () {
							//console.log(json);
							var file_id = json.file_id;
							var file_path = '<?=$temp_file_location?>'+json.file_name;
							var file_extension = json.file_extension;
							var file_name = json.file_name;
							var file_title = json.file_title;


							var ajax_delete_img = "onclick=\"ajax_delete_img('" + file_id + "', '0'); return; \"";

							<?php if($uploader["upload_type"] == 1){ // 1="only jpg,png,gif" , 2="only pdf", 3="only doc, excel, ppt", 4="All";?>
							var img_background = "style=\"background: url('" + file_path + "') no-repeat center center\"";

								return "<div class='img_frame' id='"+file_id+"'>Image No."+(count_file+1)+"<div class='uploaded_img' " + img_background + "></div><br><div style='text-align: left;margin: 0 5px;'>Image Title:</div><input type='text' name='<?=$uploader["name"];?>["+(count_file+1)+"][file_title]' style='width: 150px;' value='" + file_title + "' /><input type='hidden' name='<?=$uploader["name"];?>["+(count_file+1)+"][file_id]' value='"+file_id+"' /><br><button type='button' " + ajax_delete_img + ">Delete</button></div>";
							<?php } else if($uploader["upload_type"] == 2){ ?>
							var img_background = "style=\"background: url('plupload/images/pdf.png') no-repeat center center\"";

								return "<div class='img_frame' id='"+file_id+"'>PDF No."+(count_file+1)+"<div class='uploaded_img' " + img_background + "></div><br><div style='text-align: left;margin: 0 5px;'>PDF Title:</div><input type='text' name='<?=$uploader["name"];?>["+(count_file+1)+"][file_title]' style='width: 150px;' value='" + file_title + "' /><input type='hidden' name='<?=$uploader["name"];?>["+(count_file+1)+"][file_id]' value='"+file_id+"' /><br><button type='button' " + ajax_delete_img + ">Delete</button></div>";
							<?php } else if($uploader["upload_type"] == 3){ ?>
							if(file_extension == "doc" || file_extension == "docx"){
								var img_background = "style=\"background: url('plupload/images/doc.png') no-repeat center center\"";
							}

							if(file_extension == "xls" || file_extension == "xlsx"){
								var img_background = "style=\"background: url('plupload/images/xls.png') no-repeat center center\"";
							}

							if(file_extension == "ppt" || file_extension == "pptx"){
								var img_background = "style=\"background: url('plupload/images/ppt.png') no-repeat center center\"";
							}

								return "<div class='img_frame' id='"+file_id+"'>File No."+(count_file+1)+"<div class='uploaded_img' " + img_background + "></div><br><div style='text-align: left;margin: 0 5px;'>File Title:</div><input type='text' name='<?=$uploader["name"];?>["+(count_file+1)+"][file_title]' style='width: 150px;' value='" + file_title + "' /><input type='hidden' name='<?=$uploader["name"];?>["+(count_file+1)+"][file_id]' value='"+file_id+"' /><br><button type='button' " + ajax_delete_img + ">Delete</button></div>";

							<?php } else if($uploader["upload_type"] == 4){ ?>
							if(file_extension == "jpg" || file_extension == "jpeg" || file_extension == "png" || file_extension == "gif"){
								var img_background = "style=\"background: url('" + file_path + "') no-repeat center center\"";
							}

							if(file_extension == "pdf" ){
								var img_background = "style=\"background: url('plupload/images/pdf.png') no-repeat center center\"";
							}

							if(file_extension == "doc" || file_extension == "docx"){
								var img_background = "style=\"background: url('plupload/images/doc.png') no-repeat center center\"";
							}

							if(file_extension == "xls" || file_extension == "xlsx"){
								var img_background = "style=\"background: url('plupload/images/xls.png') no-repeat center center\"";
							}

							if(file_extension == "ppt" || file_extension == "pptx"){
								var img_background = "style=\"background: url('plupload/images/ppt.png') no-repeat center center\"";
							}

								return "<div class='img_frame' id='"+file_id+"'>File No."+(count_file+1)+"<div class='uploaded_img' " + img_background + "></div><br><div style='text-align: left;margin: 0 5px;'>File Title:</div><input type='text' name='<?=$uploader["name"];?>["+(count_file+1)+"][file_title]' style='width: 150px;' value='" + file_title + "' /><input type='hidden' name='<?=$uploader["name"];?>["+(count_file+1)+"][file_id]' value='"+file_id+"' /><br><button type='button' " + ajax_delete_img + ">Delete</button></div>";
							<?php } else {} ?>


						});


						$(".uploaded_img").css({backgroundSize: "contain"});
					}else{
						alert(json.error);

						//remove the invalid file
						up.removeFile(file);

					}


				},
				FilesAdded: function(up, file) {
					if (up.files.length > <?=$uploader["max_file_num"];?>){
						alert('You are allowed to upload only <?=$uploader["max_file_num"];?> files.');
						up.splice(<?=$uploader["max_file_num"];?>, (up.files.length-<?=$uploader["max_file_num"];?>));
					}

				},
				Error: function(up, args) {
					// Called when error occurs
					//log('[Error] ', args);
				}


			}
		});



		function log() {
			var str = "";

			plupload.each(arguments, function(arg) {
				var row = "";

				if (typeof(arg) != "string") {
					plupload.each(arg, function(value, key) {
						// Convert items in File objects to human readable form
						if (arg instanceof plupload.File) {
							// Convert status to human readable
							switch (value) {
								case plupload.QUEUED:
									value = 'QUEUED';
									break;

								case plupload.UPLOADING:
									value = 'UPLOADING';
									break;

								case plupload.FAILED:
									value = 'FAILED';
									break;

								case plupload.DONE:
									value = 'DONE';
									break;
							}
						}

						if (typeof(value) != "function") {
							row += (row ? ', ' : '') + key + '=' + value;
						}
					});

					str += row + " ";
				} else {
					str += arg + " ";
				}
			});

			var log = $('#log_<?=$uploader["name"]?>');
			log.append(str + "\n");
			log.scrollTop(log[0].scrollHeight);
		}

		<?php } ?>
	});
</script>



<!-- override plupload css -->
<style type="text/css">
	.plupload_header{
		display: none !important;
	}

	.plupload_view_thumbs .plupload_content{
		top: 0px !important;
	}

	.plupload_container{
		/*min-height: 200px !important;*/
	}

	.plupload_content{
		top: 29px !important;
		overflow-x: hidden;
	}

	.plupload_wrapper{
		width: 600px !important;
	}

</style>





<script type="text/javascript">
	function ajax_delete_img(file_id,clean_temp)
	{

		if(confirm("Are you sure to delete it?"))
		{
			var xmlhttp;

			if (window.XMLHttpRequest)
			{// code for IE7+, Firefox, Chrome, Opera, Safari
				xmlhttp=new XMLHttpRequest();
			}
			else
			{// code for IE6, IE5
				xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.onreadystatechange=function()
			{
				if (xmlhttp.readyState==4 && xmlhttp.status==200)
				{
					//document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
					//console.log(xmlhttp.responseText);
					var result = $.trim( xmlhttp.responseText);

					if(result == "success"){
						if(file_id >= 0){
							$("#"+file_id).empty();
							$("#"+file_id).hide();
						}else{
							alert("Deleted Temp File: Success.");
						}

					}else{
						alert("Deleted File: Fail.");
					}


				}
			}
			xmlhttp.open("POST","plupload/ajax_delete_image.php",true);
			xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			xmlhttp.send("clean_temp="+clean_temp+"&file_id="+file_id);

		}

	}




	function check_form(){
		$("#addform").submit();
		$("#auto_click").fancybox().trigger('click');
		/*var message = "";
		var has_file = 0;
		$("input[name='<?//=$uploader["name"];?>[][file_title]']").each(function (i) {
			has_file = 1;
			if(!$(this).val()){
				message += "Image No."+(i+1)+" miss image title! \n\n";
			}

		});

		if(has_file == 0){
			message += "You should at least upload one file! \n\n";
		}

		if(message != ""){
			alert(message);
		}else{
			$("#addform").submit();
			$("#auto_click").fancybox().trigger('click');

		}*/
	}


</script>


<!-- css for displaying uploaded file -->
<style type="text/css">

	<?php foreach($pluploader as $uploader){ ?>
	#uploaded_img_<?=$uploader["name"]?>{
		display: none;
		font-weight: bold;
	}
	<?php } ?>

	.uploaded_img{
		width: 150px;
		height: 150px;
		margin: 5px;
	}

	.img_frame{
		text-align: center;
		float: left;
		margin-right:10px;
		margin-bottom: 10px;
		width: 160px;
		height: 255px;
		border: 1px solid #b3b3b3;
	}

</style>


<!-- Add fancyBox -->
<link rel="stylesheet" href="plupload/js/fancybox_2.0/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="plupload/js/fancybox_2.0/source/jquery.fancybox.pack.js?v=2.1.5"></script>

<script>
	$(document).ready(function() {
		$(".various").fancybox({
			fitToView	: false,
			autoSize	: true,
			closeClick	: false,
			openEffect	: 'none',
			closeEffect	: 'none',
			closeBtn : true
		});
	});


</script>


<div style="display: none;">
	<a class="various" href="#popup" id="auto_click">pop up</a>
</div>

<div id="popup" style="width: 500px; display: none;padding: 5px;">
	<img src="plupload/js/fancybox_2.0/source/loading.gif" style="width: 100%;">
</div>