<iframe id="upload_target" name="upload_target" src="" style="display: none; width:0;height:0"></iframe>

<!-- Captcha form related functions -->
<script type="text/javascript">
	document.addEvent("domready", function() {
	    $('cap_reset').addEvent('click', function(){
	        hide_cap()
	    });
	    $('cap_form').addEvent('submit', function(e){
	        submit_cap();
	        e.stop()
	    });
	    $('cap_positional').addEvent('click', on_cap_click);
	});
	
	function load_cap(method, post) {
	    new Request.JSON({
	        url: "/json/set_captcha",
	        onSuccess: function(data) {
	            if (data.captcha)
					set_captcha(data);
	            else
					clear_captcha();
	        },
	        secure: false,
	        async: true,
	        method: method
	    }).send(post);
	}
	
	function set_captcha(data) {
        $('cap_id').set('value', data.id);
        if (data.result_type == 'textual') {
            $('cap_textual_img').set('src', data.src);
        	$('cap_title').set('text', '{{_("Please read the text on the captcha.")}}');
            $('cap_submit').setStyle('display', 'inline');
            $('cap_textual').setStyle('display', 'block');
            $('cap_positional').setStyle('display', 'none');
        }
        if (data.result_type == 'positional') {
        	$('cap_positional_img').set('src', data.src);
            $('cap_title').set('text', '{{_("Please click on the right captcha position.")}}');
            $('cap_submit').setStyle('display', 'none');
            $('cap_textual').setStyle('display', 'none');
            $('cap_positional').setStyle('display', 'block');
        }
	}
	
	function clear_captcha() {
        $('cap_textual').setStyle('display', 'none');
        $('cap_textual_img').set('src', '');
        $('cap_positional').setStyle('display', 'none');
        $('cap_positional_img').set('src', '');
        $('cap_title').set('text', '{{_("No Captchas to read.")}}');		
	}
	
	function submit_cap() {
	    load_cap("post", "cap_id=" + $('cap_id').get('value') + "&cap_result=" + $('cap_result').get('value') );
	    $('cap_result').set('value', '');
	    return false;
	}
	
	function on_cap_click(e) {
    	var position = e.target.getPosition();
    	var x = e.page.x - position.x;
    	var y = e.page.y - position.y;
		$('cap_result').value = x + "," + y;
		submit_cap();
    }
</script>

<!-- Captcha box -->
<div id="cap_box" class="myform">

	<form id="cap_form" action="/json/set_captcha" method="POST" enctype="multipart/form-data" onsubmit="return false;">
	
		<h1>{{_("Captcha reading")}}</h1>
		<p id="cap_title">{{_("Please read the text on the captcha.")}}</p>
		
		<div id="cap_textual">
		
			<input id="cap_id" name="cap_id" type="hidden" value="" />
		
			<label>{{_("Captcha")}}
			<span class="small">{{_("The captcha.")}}</span>
			</label>
			<span class="cont">
			    <img id="cap_textual_img" src="">
			</span>
			
			<label>{{_("Text")}}
			<span class="small">{{_("Input the text on the captcha.")}}</span>
			</label>
			<input id="cap_result" name="cap_result" type="text" size="20" />
					
		</div>
		
		<div id="cap_positional" style="text-align: center">
		    <img id="cap_positional_img" src="" style="margin: 10px; cursor:pointer">
		</div>

		<div id="button_bar" style="text-align: center">
			<span>
				<button id="cap_submit" type="submit" style="margin-left: 0">{{_("Submit")}}</button>
				<button id="cap_reset" type="reset" style="margin-left: 0">{{_("Close")}}</button>
			</span>
		</div>
		
		<div class="spacer"></div>
	
	</form>

</div>