# Function to Add New Image image_added = (image, chunk) ->

image_id = $(image).attr('id').replace 'image_', '' # Get image id for new list item id
new_list = $("li.empty_#{chunk}").clone() # Clone empty li to new list
new_list.find('input').next().val image_id # Set input image_id value = image_id
new_list.find('span').html($(image).attr('alt'))

# Set random values items id/name
id = parseInt(image_id + Math.random() * 101)
$('input', new_list).each (i,input) ->
  input = $(input)
  input.attr('name', input.attr('name').replace(/images_attributes\]\[[\d]+/, "images_attributes][" + id))
  input.attr('id', input.attr('id').replace(/images_attributes_[\d]+/, "images_attributes_" + id))

# Append thumb to new list
img = $("<img />").attr({
  title: $(image).attr('title')
  , alt: $(image).attr('alt')
  , src: $(image).attr('data-grid')
}).appendTo(new_list)

# Get dynamic items and set id/val
dynamic_items = new_list.find "#dynamic_items"
dynamic_items.attr 'id', "dynamic_items_#{image_id}"
dynamic_items.find("input").val ""

# Remove class and show new list
new_list.attr('id', "image_#{image_id}").removeClass 'empty'
new_list.attr('id', "image_#{image_id}").removeClass "empty_#{chunk}"
new_list.show()

# Append new list to correct gallery
target = "#page_images_#{chunk}"
new_list.appendTo target

# Function to edit image fields jQuery ->

# Edit image fields
$('.edit_image').live 'click', ->
  image_id = $(this).parents().parents().attr('id').replace 'image_', '' # Get image id
  items = $(this).parents().parents().find("#dynamic_items_#{image_id}")[0] # Get dynamic items of this list
  open_edit_image items, image_id # Call function open modal

# Delete image from gallery
$('.delete_image').live 'click', ->
  rm = confirm "Are you sure delete this image?"
  if(rm == true)
    $(this).parents('li').first().remove()
  else
    return false

# Reoder images
$('li.image_field').live 'hover', ->
  chunk = $(this).find('input').first().val()
  $("#page_images_#{chunk}").sortable()

# Call function to change days of month
$("#month, #year").live 'change', ->
  year = $("#year").find(":selected").val()
  month = $("#month").find(":selected").val()
  days_in_month year, month

# Dialog dynamic items open_edit_image = (items, image_id) ->

# Clone dynamic fields for modal
fields = $(items).clone()
input = fields.find('input')

# For each input create a textarea for edit
input.each (i, inp) ->
  title = $(inp).attr('data-name')
  type = $(inp).attr('data-type')
  value = $(inp).val()

  # Call function to create dynamic fields type
  field = create_fields(type, value)

  $(inp).after $("<div id='image#{image_id}_title_#{title}'><span class= 'image-fields-edit'>#{title}</span>#{field}</div>")

# Input a submit button
input.after($("<div class='form-actions'><div class='form-actions-left'><a class='button' id='insert_fields'>Insert<a></div></div>"))

# Open the dialog modal
fields.dialog({
             title: "Edit Image Fields",
             modal: true,
             resizable: false,
             autoOpen: true,
             width: 800,
             height: 500,
             close: ->
              setTimeout ->
                fields.remove();
              , 500; # This remove cloned fields after close
})

# Close in x button without save changes
$('a.ui-dialog-titlebar-close').click -> 
  fields.dialog('close');

# Insert click function
$('a#insert_fields').click ->
  # For each input get the textarea value and change input value
  input.each (i, inp) ->
    title = $(inp).attr('data-name')
    type = $(inp).attr('data-type')
    if type == "string" || type == "integer" || type == "float" || type == "decimal"
      field = "input"
    else if type == "boolean"
      field = "input-checkbox"
    else if type == "text"
      field = "textarea"
    else if type == "date" || type == "datetime"
      field = "select"

    input_val = $(items).find("input[data-name='#{title}']")

    # Make data for select
    if field == "select"
      date_value = []

      $("div#image#{image_id}_title_#{title}").find("#{field}").each ->
        date_value.push $(this).val()

      date = "#{date_value[0]}-#{date_value[1]}-#{date_value[2]}"
      hour = date_value[3]
      minute = date_value[4]
      if hour
        date = "#{date} #{hour}:#{minute}"

      input_val.val(date) 
    # Check if checkbox is selected 
    else if field == "input-checkbox"
      field = field.split("-")
      if $("div#image#{image_id}_title_#{title}").find("#{field[0]}").is(":checked")
        input_val.val("true")
      else
        input_val.val("false")
    # Input value for input text fields
    else
      input_val.val $("div#image#{image_id}_title_#{title}").find("#{field}").val()

    fields.dialog('close')

# Create Fields for each type of element create_fields = (type, value) ->

switch type
  when "string", "integer", "float", "decimal"
    field = "<input class='image-edit' type='text' value='#{value}' />"
  when "boolean"
    checked = ''
    if value == "true"
      checked = "checked"
    field = "<input class='image-edit-checkbox' type='checkbox' #{checked} />"
  when "text"
    field = "<textarea class='image-edit'>#{value}</textarea>"
  when "date"
    if value 
      value = value.split("-")
      field = "<select id='year'><option></option>#{create_date(2010, 2030, 'year', value[0])}</select>
               <select id='month'><option></option>#{create_date(1, 12, 'month', value[1])}</select>
               <select id='day'><option></option>#{create_date(1,'', 'day', value)}</select>"
    else
      field = "<select id='year'><option></option>#{create_date(2010, 2030,'year')}</select>
               <select id='month'><option></option>#{create_date(1, 12,'month')}</select>
               <select id='day'><option></option>#{create_date(1,'','day')}</select>"
   when "datetime"
    if value 
      value = value.split("-")
      field = "<select id='year'><option></option>#{create_date(2010, 2030, 'year', value[0])}</select>
               <select id='month'><option></option>#{create_date(1, 12, 'month', value[1])}</select>
               <select id='day'><option></option>#{create_date(1,'', 'day', value)}</select>
               <select id='hour'><option></option>#{create_date(00, 23, 'hour', value.join("-"))}</select>
               <select id='minute'><option></option>#{create_date(00,59, 'minute', value.join("-"))}</select>"
    else
      field = "<select name='date[0]' id='year'><option></option>#{create_date(2010, 2030,'year')}</select>
               <select name='date[1]' id='month'><option></option>#{create_date(1, 12,'month')}</select>
               <select name='date[2]' id='day'><option></option>#{create_date(1,'','day')}</select>
               <select name='date[3]' id='hour'><option></option>#{create_date(00, 23, 'hour')}</select>
               <select name='date[4]' id='minute'><option></option>#{create_date(00, 59, 'minute')}</select>"

# Create options for date select create_date = (init, end, obj_id, value) ->

# Set days in month
if obj_id == 'day' && !value
  year = new Date().getFullYear()
  month = new Date().getMonth()
  end = new Date( year, month + 1, 0 ).getDate()
else if obj_id == 'day' && value
  year = new Date(value).getFullYear()
  month = (new Date(value).getMonth() + 1) 
  day = new Date(value).getDate()
  end = new Date( year, month, 0 ).getDate();

for init in [(init)..(end)]
  selected = ''

  if value 
    # Selected Year
    if obj_id == 'year' && init == new Date(value,1).getFullYear()
      selected = 'selected'
    # Selected Month
    if obj_id == 'month' && init == new Date(0,value).getMonth()
      selected = 'selected'
    # Selected Day
    if obj_id == 'day' && init == new Date(year, month, day).getDate()
      selected = 'selected'
    # Selected Hour
    if obj_id == 'hour' && init == new Date(value).getUTCHours()
      selected = 'selected'
    # Selected Minute
    if obj_id == 'minute' && init == new Date(value).getUTCMinutes()
      selected = 'selected'

  "<option value='#{init}' #{selected} >#{init}</option>"

# Get max days in month

days_in_month = (year, month) ->

$("#day").empty()
init = 1
end = new Date(year,month,0).getDate()
for init in [(init)..(end)]
  $("#day").append "<option value='#{init}'>#{init}</option>"