{% load pin_tags %}
<form class="form-horizontal" action="{% url pin-sendurl%}" method="post" id="pin-form-from-url">
{%csrf_token%}
{{ form.errors}}
	<div class="control-group">
		<label class="control-label">آدرس:</label>
		<div class="controls">
			<input type="text" name="url" id="url" placeholder="URL" class="span3 ltr"> <br><br>
			<input id="btn-pin-url" type="button" class="btn btn-primary" value="بررسی لینک" />
		</div>
	</div>
	<input type="hidden" name="image" id="image_url">

<div id="hidden_actions" style="display: none">
	<div class="control-group" id="image_control" >
		<div class="controls">
			<div id="images" style="width:210px;text-align: center">
				<div class="" style="width: 100%;">
				<a style="float: right" class="img-move btn" rel="next" href="#"><i class="icon-forward"></i></a>
				<a style="float: left" class="img-move btn" rel="back" href="#"><i class="icon-backward"></i></a>
				</div><br>
				<div class="clearfix"> </div>
				<img src="" id="ajx-img" style="max-height: 100px;max-width: 150px;margin-top: 10px">
			</div>
		</div>
	</div>
	<div class="control-group ">
            
        <label class="control-label">توضیحات</label>
		<div class="controls">
			<textarea id="id_text" rows="4" cols="40" name="text"> </textarea>
		<span class="help-inline"> </span>
		</div>
    </div>
    
    <div class="control-group">
		<label class="control-label">برچسب ها: </label>
		<div class="controls">
			<textarea id="textareaUrl" name="tags" rows="1"></textarea>
		</div>
	</div>
	<div class="form-actions">
		<input id="pin-submit" type="submit" class="btn btn-primary disabled" value="ارسال" style="display: none" />
	</div>
</div>
</form>

{% load compress %}
{% compress js inline%}

<script type="text/javascript">

function cur_id_change(action){
	if (action == 'next'){
		cur_id++;
		if (cur_id>=images.length){
			cur_id=0;
		}
	}else if(action == 'back'){
		cur_id--;
		if(cur_id<0){
			cur_id=images.length-1;
		}
	}
}
$('#textareaUrl').textext({ plugins: 'tags' });
$(".img-move").click(function(){
	action = $(this).attr('rel')
	cur_id_change(action);
	$("#ajx-img").attr('src', images[cur_id]);
	$("#image_url").val(images[cur_id]);
});

$("#btn-pin-url").click(function(){
	$(this).val('لطفا صبر کنید');
	$(this).addClass('disabled');
	
	url = $("#url").val();
	$.post('{% url pin-sendurl-a%}',{'url':url}, parse_data, 'json');
	
});
var images = [];
var cur_id = 0;

function error_alert(){
	alert('لطفا آدرس را با دقت وارد نمایید');
	$("#btn-pin-url").val('بررسی لینک').removeClass('disabled');
}

function parse_data(data){
	if(data==0){
		error_alert();
		return false;
	}
	$.each(data, function(index, element) {
        images.push(element);
    });
    
    start_images();
}


function start_images(){
	$("#btn-pin-url").fadeOut();
	$('#pin-submit').removeClass('disabled').fadeIn();
	$("#hidden_actions").fadeIn();
	$("#ajx-img").attr('src', images[0]);
	$("#image_url").val(images[0]);
	cur_id=0;
}
</script>
{%endcompress%}
