<% content_for :page_specific_css do %>
	<%= stylesheet_link_tag "lib/datepicker"  %>
<% end %>
<% content_for :page_specific_javascript do %>
	<%= javascript_include_tag "lib/datepicker"  %>
	<%= javascript_include_tag "lib/date.format"  %>
	<%= javascript_include_tag "inc/modal-preview" %>
	<%= javascript_include_tag "/static/jquery.cycle.all.latest.js" %>
	<%= javascript_include_tag "inc/jquery.imagesloaded" %>
	
<% end %>


<div id="poststuff">
	<form class="clear">
		<!--Widget start-->
		<div id="sub-wiget">
          <div id="widget-date" class="widget-box">
              <div class="widget-action clear">
                  <a href="#" class="action"><i title="Set the announcement to start and end dates" class="icon-exclamation-sign icon-white tip"></i></a>
              </div>
              <h3 class="widget-title"><i class="icons-calendar icons-white"></i> Date</h3>
              <div class="widget-content clear">
                  <div id="calendarRange">
                      <div class="input-append">
                          <span class="showDate"></span><span class="add-on btn">▼</span>
													<%= f.hidden_field :parse_post_date,:value => @ad_image.post_date.strftime('%Y / %m / %d') %>
													<%= f.hidden_field :parse_unpost_date,:value => @ad_image.unpost_date.strftime('%Y / %m / %d')%>

                      </div>
                      <div id="widgetCalendar">
                      </div>
                  </div>
                  <script type="text/javascript">
                      var today = new Date();
                      today = today.format('isoDate');
                      var state = false;
                      var arr = state ? "▼" : "▲"
											var start_date = <%= @ad_image.post_date.nil?? 'today' : "'#{@ad_image.post_date.strftime('%Y / %m / %d')}'" %>;
											var end_date = <%= @ad_image.unpost_date.nil?? 'today' : "'#{@ad_image.unpost_date.strftime('%Y / %m / %d')}'" %>;
                      //calendarRange
                      $('#calendarRange .showDate').html(start_date+" - "+end_date);
                      $('#calendarRange .calendarInput').val(start_date+" - "+end_date);
                      $('#calendarRange #widgetCalendar').DatePicker({
                          flat: true,
                          format: 'Y / m / d',
													date: [start_date,end_date],
                          calendars: 1,
                          mode: 'range',
                          starts: 1,
                          onChange: function(formated) {
                              $('#calendarRange .showDate').get(0).innerHTML = formated.join(' - ');
                              $('#calendarRange .calendarInput').val(formated.join(' - '));
															start_date = formated[0].replace(/\s/g, "");
															end_date = formated[1].replace(/\s/g, "");
															$('#ad_image_parse_post_date').val(start_date);
															$('#ad_image_parse_unpost_date').val(end_date);
                          }
                      });
                      $('#calendarRange .input-append').bind('click', function(){
                          var arr = state ? "▼" : "▲"
                          $('#calendarRange .add-on').html(arr);
                          $('#calendarRange #widgetCalendar').stop().animate({height: state ? 0 : $('#calendarRange #widgetCalendar div.datepicker').get(0).offsetHeight}, 500);
                          state = !state;
                          return false;
                      });
                      $('#calendarRange #widgetCalendar div.datepicker').css('position', 'absolute');
                  </script>  
              </div>
          </div>
		
			<div id="widget-picture" class="widget-box">
        <div class="widget-action clear">
            <a class="action"><i title="Upload pictures" class="icon-exclamation-sign icon-white tip"></i></a>
        </div>
        <h3 class="widget-title"><i class="icons-picture icons-white"></i>Picture</h3>
        <div class="widget-content clear">         
          <div class="control-group">
            <div  class="upload-picture">
              <!--請程式務必將圖片尺寸加入到行內裡-->
              <%= image_tag @ad_image.file rescue ''%>
            </div>
            <span class="alert widgetInfo">此區塊圖片尺寸請使用580px × 225px</span>
            <div class="controls file-upload input-prepend">
              <label class="control-label add-on btn" for="input-upload">
								Choose file
								<%= f.file_field :file,:id=>"input-upload",:class => "upload", :onchange=> "document.getElementById('fu1').innerHTML = this.form.fu1.value = this.value;" %>
							</label>
							<span id="fu1" class="file-name"></span>
							<br>
							<input name="fu1" class="input-medium" type="text">
						</div>
					</div>
				</div>
			</div>
				
			<div id="widget-type" class="widget-box">
					<div class="widget-action clear">
						<a class="action"><i class="icon-exclamation-sign icon-white tip" data-original-title="Upload pictures"></i></a>
					</div>
					<h3 class="widget-title"><i class="icons-star-thin icons-white"></i>Type</h3>
					<div class="widget-content clear">
						<%= f.select :link_open ,AdImage::LINK_OPEN_TYPES%>
					</div>
				</div>
			
			<div id="widget-time" class="widget-box widget-size-300">
					<div class="widget-action clear">
						<a class="action"><i class="icon-exclamation-sign icon-white tip" data-original-title="Set the range time"></i></a>
					</div>
					<h3 class="widget-title"><i class="icons-time icons-white"></i>FEQ</h3>
					<div class="widget-content clear">
						 <%= f.text_field :weight ,:class=> 'span3',:placeholder=>"在套圖中出現次數 1次請輸入1" %>
					</div>
				</div>
				
			<div id="widget-link" class="widget-box widget-size-300">
					<div class="widget-action clear">
						<a class="action"><i class="icon-exclamation-sign icon-white tip" data-original-title="Add a reference link"></i></a>
					</div>
					<h3 class="widget-title"><i class="icons-link icons-white"></i>Link</h3>
					<div class="widget-content clear">
						<%= f.text_field :out_link ,:class=> 'span3',:placeholder => "輸入連結"%>
					</div>
				</div>

		</div>
			<!--Wiget End-->
			<!--Post Start-->
			<div id="post-body">
				<div id="post-body-content" class="clear">
					<ul class="nav nav-tabs">
						<% site_valid_locales_default_head.each do |locale|%>
							<%= content_tag :li,link_to(I18nVariable.from_locale(locale),"##{locale}",:data=>{:toggle => "tab"}),:class=> (active_when_default_locale_eq locale)  %>
						<% end %>
					</ul>
					<div class="tab-content">
						<%= select_tag 'ad_banner[id]',options_from_collection_for_select(AdBanner.all, "id", "title",params[:ad_banner_id]) , :class=>"input-medium",   %>
						<% site_valid_locales_default_head.each do |locale|%>
							<%= content_tag :div,:class	=> "tab-pane #{active_when_default_locale_eq locale}",:id=>"#{locale}" do%>
								<div class="title">
									<%= f.fields_for :title,@ad_image.title do |f| %>
										<%= f.text_field locale,:class=>"ad_image-title post-title",:placeholder => "輸入標題"%>
									<% end %>
								</div>
								<br/>
								<div class="context editor">
									<%= f.fields_for :context, @ad_image.context do |f| %>
									<%= f.text_area locale,:style => "width:100%", :class => "tinymce_textarea post-title" %>
									<% end %>
								</div>

							<% end %>
						<% end %>
						</div>
						
					</div>
				</div>
				<div class="form-actions">
					<%= link_to t("modal.preview"), admin_realtime_preview_ad_banner_path(@ad_image.ad_banner.title) ,:class=>"preview_trigger btn btn-success" rescue nil%>
					<%= f.submit t("submit"),:class=>"btn btn-primary" %>
					<%= f.submit t("cancel"),:class=>"btn ",:type => 'reset' %>
				</div>
			</div>
			<!--Post End-->
		</form>
	</div>