// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults

Position.getWindowSize = function(w) {
        w = w ? w : window;
        var width = w.innerWidth || (w.document.documentElement.clientWidth || w.document.body.clientWidth);
        var height = w.innerHeight || (w.document.documentElement.clientHeight || w.document.body.clientHeight);
        return {'width':width, 'height':height};
}


var RatingControl = {
  initialize:function(element){
    //first we need to know the form field name
    //just grab it from the first radio field
    var radio_field = element.select("input[type=radio]").first();
    var checked_field = element.select("input[checked]").first();
    var selected_value = checked_field ? checked_field.getValue() : 0;
    this.setupHiddenField(element, {name:radio_field.name, value:selected_value});
    this.setupStars(element);
    this.resetStars(element.select(".score_star").first())
  },
  setupHiddenField:function(parent, options){
    //replace the content of this element with a hidden field
    parent.update("");
    var options = Object.extend({type:'hidden', name:'score', value:0}, options);
    var hidden_field = Builder.node('input', options);
    parent.appendChild(hidden_field);
  },
  setupStars:function(parent){
    [1,2,3,4,5].each(function(value){
      var star = parent.appendChild(Builder.node("span", {'class':'score_star'}, value));
      Event.observe(star, 'mouseover', RatingControl.overStar.bindAsEventListener(RatingControl));
      Event.observe(star, 'mouseout', RatingControl.offStar.bindAsEventListener(RatingControl));
      Event.observe(star, 'click', RatingControl.selectStar.bindAsEventListener(RatingControl));
    })
  },
  overStar:function(event){
    this.highlightStars(event.element());
  },
  offStar:function(event){
    this.resetStars(event.element());
  },
  selectStar:function(event){
    var star = event.element();
    var field = star.up().select("input").first();
    field.setValue(star.innerHTML);
  },
  highlightStars:function(over_star){
    var stars = over_star.previousSiblings();
    stars.push(over_star);
    stars.each(function(element){
      if(element.hasClassName('score_star')) element.addClassName('highlight');
    });
    over_star.nextSiblings().each(function(element){
      element.removeClassName('highlight');
    })
  },
  resetStars:function(star){
    var field = star.up().select("input").first();
    var selected_value = parseInt(field.getValue());
    star.up().childElements().each(function(element){
      if(element.hasClassName('score_star')){
        if(parseInt(element.innerHTML) <= selected_value){
          element.addClassName('highlight');
        }else{
          element.removeClassName('highlight');
        }
      }
    });
  }
};

Event.observe(document, 'dom:loaded', function(){
  $$(".score_controls").each(function(element){
    RatingControl.initialize(element);
  });
});

var Reader = {
  reader_min_height:300,
  init:function(){
    var toolbars = $$('.reading_toolbar');
    if(toolbars.length > 0){
      this.toolbars = toolbars;
      this.reader_view = $$("div.content_padding").first();
      this.reader_container = $$("div.excerpt_content").first();
      this.reader_scroll = $$("div.excerpt_scroll").first();
      this.setup();
    }
    $$('.excerpt_content hr').invoke('replace','<p class="hr"></p>');
  },
  setup:function(){
    $$('.read_view_paged').each(function(paged_button){
      Event.observe(paged_button, 'click', Reader.setupPageView.bindAsEventListener(Reader));
    });
    $$('.read_view_scroll').each(function(scroll_button){
      Event.observe(scroll_button, 'click', Reader.setupScrollView.bindAsEventListener(Reader));
    });    
    this.setupPageView();
  },
  setupScrollView:function(event){
    if(event) event.preventDefault();
    $$('.content_padding').first().removeClassName('reader_paged');
    this.resetPageView();
    $$(".read_view_prev").each(function(el){
      Event.stopObserving(el,'click', Reader.previous_page.bindAsEventListener(Reader));      
    });
    $$(".read_view_next").each(function(el){
      Event.stopObserving(el,'click', Reader.next_page.bindAsEventListener(Reader));      
    });
    $(document).stopObserving('keyup', Reader.keypress.bindAsEventListener(Reader));
    $$(".reading_page_indicator").each(function(el){el.hide()});
    $$(".read_view_page_controls").each(function(el){el.hide()});
    $$(".read_view_paged").each(function(el){el.removeClassName('selected')});
    $$(".read_view_scroll").each(function(el){el.addClassName('selected')});
  },
  setupPageView:function(event){
    if(event) event.preventDefault();
    //Event.observe(window,'resize', this.resizePageView.bindAsEventListener(Reader));
    // IE has troubles with window resizing
    $$('.content_padding').first().addClassName('reader_paged');
    $$(".read_view_prev").each(function(el){
      Event.observe(el,'click', Reader.previous_page.bindAsEventListener(Reader));      
    });
    $$(".read_view_next").each(function(el){
      Event.observe(el,'click', Reader.next_page.bindAsEventListener(Reader));      
    });
    $(document).observe('keyup', Reader.keypress.bindAsEventListener(Reader));
    this.resizePageView();
    $$(".reading_page_indicator").each(function(el){el.show()});
    $$(".read_view_page_controls").each(function(el){el.show()});
    $$(".read_view_paged").each(function(el){el.addClassName('selected')});
    $$(".read_view_scroll").each(function(el){el.removeClassName('selected')});
  },
  keypress:function(event){
    if(event.keyCode == 39){
      this.next_page();
      event.preventDefault();
    }else if(event.keyCode == 37){
      this.previous_page();
      event.preventDefault();
    }
  },
  resetPageView:function(){
    this.reader_container.setStyle({height: 'auto', position: 'static', left: '0px'});
    this.reader_scroll.setStyle({position: 'static'});
  },
  resizePageView:function(event){
    var reader_height = 600;//(reader_height < 400) ? 400 : reader_height;
    var scroll_height = this.reader_scroll.getHeight();
    var rounded_height = Math.floor(reader_height/24) * 24;
    this.reader_container.setStyle({height: rounded_height + 'px', position: 'relative'});
    this.reader_scroll.setStyle({position: 'absolute'});
    this.page_count = Math.ceil(scroll_height/reader_height);
    this.setPageStatus();
  },
  getHeights:function(){
    return {
      'window':Position.getWindowSize().height,
      'body':$$('body').first().getHeight(),
      'reader':this.reader_view.getHeight()
    }
  },
  current_page:function(){
    return Math.ceil(Math.abs(this.reader_scroll.positionedOffset()[1])/this.reader_view.getHeight()) + 1;
  },
  next_page:function(event){
    if(event) event.preventDefault();
    this.moveToPage(this.reader_scroll.positionedOffset()[1] - this.reader_container.getHeight());
  },
  previous_page:function(event){
    if(event) event.preventDefault();
    this.moveToPage(this.reader_scroll.positionedOffset()[1] + this.reader_container.getHeight());
  },
  setPageStatus:function(){
    var status = "Page #{page} of #{pages}".interpolate({ page: this.current_page(), pages: this.page_count });
    $$('.reading_toolbar .reading_page_indicator').each(function(indicator){
      indicator.update(status);
    });
  },
  moveToPage:function(pixels){
    var ani_direction = (pixels > this.reader_scroll.positionedOffset()[1]) ? -1 : 1;
    var current_top = this.reader_scroll.positionedOffset()[1];
    var current_page = this.current_page();
    if(current_page == 1 && ani_direction == -1) return;
    if(current_page == this.page_count && ani_direction == 1) return;
    var ani_el = this.reader_view.select("div.excerpt_content").first();
    new Effect.Parallel([
      new Effect.Move(ani_el, {x:-50 * ani_direction, y:0}),
      new Effect.Opacity(ani_el, {from:1.0,to:0})
    ], {
      duration: 0.2,
      afterFinish:function(){
        Reader.reader_scroll.setStyle({top:(pixels)+'px'});
        Reader.setPageStatus();
        ani_el.setStyle({left:(50 * ani_direction) + 'px'});
        new Effect.Parallel([
          new Effect.Move(ani_el, {x:0, mode:'absolute'}),
          new Effect.Opacity(ani_el, {from:0,to:1.0})
        ], {
          duration: 0.2
        }
        );
      }
    });
  }
}

// I don't understand this at all.  Maybe someday this can be debugged into a cleaner implementation, but in the
// meantime I'm going to go with some good old-fashioned javascript style like I understand. (Jason, 9/25/08)
// This uses the Prototype library, automatically cross browser javascript library http://prototypejs.org/api (Beau, 10/21/06)
Spoilers = {
  init:function(){
    $$('.spoiler').each(function(element){
      element.observe('click', Spoilers.showSpoiler)
    });
  },
  showSpoiler:function(event){
    var element = event.element();
    if(!element.hasClassName('spoiler')) element = element.up('.spoiler');
    if(element.displayed) return;
    if(confirm('Are you sure you want to show the spoiler?')){
      element.displayed = true;
      element.select('.spoiler_text').invoke('setStyle', {display:'inline'});
      element.select('.redacted').invoke('hide');
    }
  }
}
// here's my new spoiler stuff.  If old comments can be easily re-saved, then get rid of the above code.
function showSpoiler(id) {
  var post = document.getElementById(id);
  var spans = post.getElementsByTagName('span');
  for (var i = 0; i < spans.length; i++) {
    if (spans[i].id == "new_spoiler")
      spans[i].style.display = 'inline';
    if (spans[i].id == "showlink")
      spans[i].style.display = 'none';
    if (spans[i].id == "hidelink")
      spans[i].style.display = 'inline';
  }
}

function hideSpoiler(id) {
  var post = document.getElementById(id);
  var spans = post.getElementsByTagName('span');
  for (var i = 0; i < spans.length; i++) {
    if (spans[i].id == "new_spoiler")
      spans[i].style.display = 'none';
    if (spans[i].id == "showlink")
      spans[i].style.display = 'inline';
    if (spans[i].id == "hidelink")
      spans[i].style.display = 'none';
  }
  post.scrollIntoView(true);
}

TagList = {
  init:function(){
    $$('.tag_selection_list.writable').each(function(list){
      list.insert({top: '<a href="#" class="tag_list_toggle">Show List</a>'});
      list.select('.tag_selection_list_wrap').invoke('hide');
      list.select('.tag_list_toggle').first().observe('click', function(event){
        Event.stop(event);
        var tag_link = event.element();
        var tag_list = tag_link.up('.tag_selection_list').select('.tag_selection_list_wrap').first();
        tag_list.toggle();
        tag_link.update(tag_list.visible() ? 'Hide List' : 'Show List');
        tag_link.blur();
      })
      list.select("label").invoke('observe','click', TagList.updateTextField);
      list.up('.tag_selection_controls').select('input[type=text]').invoke('observe','keyup', TagList.updateCheckboxes);
    });
  },
  updateTextField:function(event){
    var checkbox = $(event.element());
    var text_field = checkbox.up('.tag_selection_controls').select('input[type=text]').first();
    var tags = TagList.tagList($F(text_field));
    if(checkbox.checked){
      tags.push(checkbox.value);
    }else{
       tags = tags.reject(function(tag){
        return checkbox.value == tag; 
      });
    }
    text_field.value = tags.join(', ').strip();
  },
  tagList:function(tag_string){
    return tag_string.split(",").invoke('strip').invoke('toLowerCase').reject(function(tag){ return tag == ''});
  },
  updateCheckboxes:function(event){
    var tf = event.element();
    var cbs = tf.up('.tag_selection_controls').select('input[type=checkbox]');
    var tags = TagList.tagList($F(tf));
    cbs.each(function(cb){
      cb.checked = tags.include(cb.value.toLowerCase());
    });
  }
}

Event.observe(document, 'dom:loaded', Reader.init.bindAsEventListener(Reader));
Event.observe(document, 'dom:loaded', Spoilers.init.bindAsEventListener(Spoilers));
Event.observe(document, 'dom:loaded', TagList.init.bindAsEventListener(TagList));

function HelpOn(TheLink){
	var XPos = TheLink.offsetLeft+TheLink.offsetParent.offsetLeft+TheLink.offsetWidth 
	var YPos = TheLink.offsetTop+TheLink.offsetParent.offsetTop+TheLink.offsetHeight 
	document.getElementById("HelpBox").style.visibility = "visible"
	document.getElementById("HelpBox").style.left = XPos + "px"	
	document.getElementById("HelpBox").style.top = YPos + "px"	
}

function HelpOff() {
	document.getElementById("HelpBox").style.visibility = "hidden"	
}

function HelpTest(TheLink)
{
    var offsetInfo = ""
    offsetInfo = "The ID is: " + TheLink.id + "\r"
    offsetInfo += "The offset left is: " + TheLink.offsetLeft + "\r"
    offsetInfo += "The offset top is: " + TheLink.offsetTop + "\r"
    offsetInfo += "The offset height is: " + TheLink.offsetHeight + "\r"
    offsetInfo += "The offset width is: " + TheLink.offsetWidth + "\r"
    offsetInfo += "The parent ID is: " + TheLink.parentElement.id + "\r"
    offsetInfo += "The parent offset left is: " + TheLink.offsetParent.offsetLeft + "\r"
    offsetInfo += "The parent offset top is: " + TheLink.offsetParent.offsetTop + "\r"
    offsetInfo += "The scrolltop is: " + TheLink.scrollTop + "\r"
    alert(offsetInfo);
}