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

function slideLeft(id, stepWidth, leftButton, rightButton) {
  var slider = $(id);
  var container = slider.getOffsetParent();
  if (slider && container) {
    var left = slider.positionedOffset().left;
    if (left + stepWidth < 0) {
      new Effect.Move(slider, {
        x: (stepWidth), y: 0, mode: 'relative',
        transition: Effect.Transitions.sinoidal,
        duration: 0.5,
        beforeStart: function() {
          leftButton.style.visibility = 'hidden';
        },
        afterFinish: function() {
          leftButton.style.visibility = 'visible';
					updateButtons(slider, leftButton, rightButton, stepWidth);
        }
      });
    } else {
      slideToStart(id, leftButton, rightButton, stepWidth);
    }
  }
}

function slideToStart(id, leftButton, rightButton, stepWidth) {
  var slider = $(id);
  if (slider) {
    new Effect.Move(slider, {
      x: 0, y: 0, mode: 'absolute',
      transition: Effect.Transitions.sinoidal,
      duration: 0.5,
      beforeStart: function() {
        leftButton.style.visibility = 'hidden';
      },
      afterFinish: function() {
        leftButton.style.visibility = 'visible';
				updateButtons(slider, leftButton, rightButton, stepWidth);
      }
    });
  }
}

function slideRight(id, stepWidth, leftButton, rightButton, overhang) {
  var slider = $(id);
  var container = slider.getOffsetParent();  
  if (slider && container) {
    var left = slider.positionedOffset().left;
    if (left >= -(slider.getWidth() - container.getWidth() - stepWidth)) {
      new Effect.Move(slider, {
        x: -(stepWidth), y: 0, mode: 'relative',
        transition: Effect.Transitions.sinoidal,
        duration: 0.5,
        beforeStart: function() {
          rightButton.style.visibility = 'hidden';
        },
        afterFinish: function() {
          rightButton.style.visibility = 'visible';
					updateButtons(slider, leftButton, rightButton, stepWidth);
        }
      });
    } else {
      slideToEnd(id, leftButton, rightButton, overhang, stepWidth);
    }
  }
}

function slideToEnd(id, leftButton, rightButton, overhang, stepWidth) {
  var slider = $(id);
  var container = slider.getOffsetParent();  
  if (slider && container) {
    new Effect.Move(slider, {
      x: -(slider.getWidth() - container.getWidth() - overhang), y: 0, mode: 'absolute',
      transition: Effect.Transitions.sinoidal,
      duration: 0.5,
      beforeStart: function() {
        rightButton.style.visibility = 'hidden';
      },
      afterFinish: function() {
        rightButton.style.visibility = 'visible';
				updateButtons(slider, leftButton, rightButton, stepWidth);
      }
    });
  }  
}

function updateButtons(slider, leftButton, rightButton, stepWidth) {
	if(slider.positionedOffset().left == 0) {
		leftButton.style.visibility = 'hidden';
	} else {
		leftButton.style.visibility = 'visible';
	}
	
	if (slider.positionedOffset().left == -(slider.getWidth() - slider.getOffsetParent().getWidth())) {
		rightButton.style.visibility = 'hidden';
	} else {
		rightButton.style.visibility = 'visible';
	}
}

// var sourceList;
// var targetList;
// var lessonList;
// 
// var SlidingList = Class.create({
  // initialize: function(list) {
    // this.list = list;
    // this.scrollContainer = new Element('div');
    // //this.scrollLeftButton = new Element('div').update('<');
    // //this.scrollRightButton = new Element('div').update('>');   
  // 
    // this.scrollLeftButton = document.getElementsByClassName('scrollbtn_left')[0];
    // 
    // //deactivate scroll-left button on start
    // document.getElementsByClassName('scrollbtn_l_active')[0].style.display = 'none';
    // document.getElementsByClassName('scrollbtn_l_inactive')[0].style.display = 'block';
    // this.scrollLeftButton.style.cursor = 'default';
    // 
    // this.scrollRightButton = document.getElementsByClassName('scrollbtn_right')[0];
   // 
    // this.initScrollContainer();
    // this.initList();
    // 
    // this.list.wrap(this.scrollContainer);
    // 
	 // // this.scrollContainer.insert({before: this.scrollLeftButton});
	 // // this.scrollContainer.insert({before: this.scrollRightButton});	  
	  // 
	  // this.slb = this.slideLeft.bindAsEventListener(this)
	  // this.srb = this.slideRight.bindAsEventListener(this)
	  // 
	  // this.scrollLeftButton.observe('click', this.slb);	  
	  // this.scrollRightButton.observe('click', this.srb);
    // 
  // },
  // 
  // initScrollContainer: function() {
    // with (this.scrollContainer.style) {
	    // position = 'relative';
	    // width = this.list.getWidth() + 'px';
	    // height = this.list.getHeight() + 'px';
	    // overflow = 'hidden';
	  // }  
	// 
  // },
  // 
  // initList: function() {
    // var listWidth = 0;
    // var listHeight = this.list.getHeight();
    // this.list.select('li').each(function(item) {
	    // with (item.style) {
	      // height = listHeight + 'px';
      // }
	    // if (item.visible())
	      // listWidth += item.getWidth();
	  // });
	  // 
	  // with (this.list.style) {
	    // position = 'absolute';
	    // width = ((listWidth > this.scrollContainer.getWidth()) ? listWidth : this.scrollContainer.getWidth()) + 'px';
	  // }  
  // },
  // 
  // slideLeft: function() {
    // var left = this.list.positionedOffset().left;
    // var slidingList = this;
    // if (left < 0) {
      // new Effect.Move(this.list, {
        // x: this.list.select('li')[0].getWidth(), y: 0, mode: 'relative',
        // transition: Effect.Transitions.spring,
        // duration: 1.0,
        // beforeStart: function() {
          // slidingList.scrollLeftButton.stopObserving('click', slidingList.slb)
          // slidingList.scrollRightButton.stopObserving('click', slidingList.srb)
        // },
        // afterFinish: function() {
          // slidingList.scrollLeftButton.observe('click', slidingList.slb);
          // slidingList.scrollRightButton.observe('click', slidingList.srb);
	   // 
	   // 
        // }
      // });
      // 
      // //check wether we should deactivate the slide left button      
	// if((left + this.list.select('li')[0].getWidth()) >= 0) {
	   // document.getElementsByClassName('scrollbtn_l_active')[0].style.display = 'none';
	   // document.getElementsByClassName('scrollbtn_l_inactive')[0].style.display = 'block';
	   // this.scrollLeftButton.style.cursor = 'default';	   
	// }
	// 
	// //activate scroll right button since we just scrolled left
	// document.getElementsByClassName('scrollbtn_r_active')[0].style.display = 'block';
	// document.getElementsByClassName('scrollbtn_r_inactive')[0].style.display = 'none';
	// this.scrollRightButton.style.cursor = 'pointer';
    // }
  // },
  // 
  // slideRight: function() {
   // //alert(" LEFT: "+this.list.positionedOffset().left+" this.list.getWidth(): "+this.list.getWidth()+ " - this.scrollContainer.getWidth(): "+this.scrollContainer.getWidth()+ " :TEST: "+(this.list.getWidth() - this.scrollContainer.getWidth()));
    // var left = this.list.positionedOffset().left;
    // var slidingList = this;
    // //if (left > -(this.list.getWidth() - this.scrollContainer.getWidth() - 1)) {
    // if (left > -(this.list.getWidth() - this.scrollContainer.getWidth())) { //45 --> left margin
      // new Effect.Move(this.list, {
        // x: -(this.list.select('li')[0].getWidth()), y: 0, mode: 'relative',
        // transition: Effect.Transitions.spring,
        // duration: 1.0,
        // beforeStart: function() {
          // slidingList.scrollLeftButton.stopObserving('click', slidingList.slb)
          // slidingList.scrollRightButton.stopObserving('click', slidingList.srb)
        // },
        // afterFinish: function() {
          // slidingList.scrollLeftButton.observe('click', slidingList.slb);
          // slidingList.scrollRightButton.observe('click', slidingList.srb);
        // }
      // });
      // 
      // //check wether we should deactivate the slide right button
	// if( (left - this.list.select('li')[0].getWidth()) <= -(this.list.getWidth() - this.scrollContainer.getWidth())) {
	   // document.getElementsByClassName('scrollbtn_r_active')[0].style.display = 'none';
	   // document.getElementsByClassName('scrollbtn_r_inactive')[0].style.display = 'block';
	   // this.scrollRightButton.style.cursor = 'default';
	   // 
	   // 
	// }
     // 
       // //activate slide left button since we just scrolled right
       // document.getElementsByClassName('scrollbtn_l_active')[0].style.display = 'block';
	// document.getElementsByClassName('scrollbtn_l_inactive')[0].style.display = 'none';
	// this.scrollLeftButton.style.cursor = 'pointer';
    // }
  // },
  // 
  // slideToEnd: function() {
    // var slidingList = this;
    // new Effect.Move(this.list, {
      // x: -(this.list.getWidth() - this.scrollContainer.getWidth()), y: 0, mode: 'absolute',
      // transition: Effect.Transitions.spring,
      // duration: 1.0,
      // beforeStart: function() {
        // slidingList.scrollLeftButton.stopObserving('click', slidingList.slb)
        // slidingList.scrollRightButton.stopObserving('click', slidingList.srb)
      // },
      // afterFinish: function() {
        // slidingList.scrollLeftButton.observe('click', slidingList.slb);
        // slidingList.scrollRightButton.observe('click', slidingList.srb);
      // }
    // });
  // },
  // 
  // goToPosition: function(position) {
   // 
    // var left = -(position * 173);
    // this.list.style.left = left + 'px';
  // }
// });
// 
// function addLessonClicked(event) {
  // var lesson = Event.element(event).parentNode;
  // var id = lesson.id.replace("availableLesson_","");
  // var addButton = Event.element(event)
  // 
  // addButton.addClassName('inactive');
  // addButton.stopObserving('click', addLessonClicked);
  // lesson.hide();
      // 
  // if ($('selectedLesson_'+id) == null) {
  // 
    // var item = new Element('li');
    // 
    // var lessonTopic = new Element('div').update(lesson.select('div.lessonTopic')[0].innerHTML + ' ');
    // lessonTopic.addClassName('lessonTopic');
    // $('selectedLessons').insert(item);
        // 
    // var deleteButton = new Element('div').update('Entfernen');
    // deleteButton.observe('click', removeLessonClicked);
        // 
    // item.insert(lessonTopic);
    // item.insert(deleteButton);
    // item.id = 'selectedLesson_'+id;
        // 
    // Sortable.create('selectedLessons', {
      // constraint: 'horizontal',
      // overlap: 'horizontal'
    // });
    // 
    // sourceList.initList();
    // targetList.initList();
    // targetList.slideToEnd();
  // }
// }
// 
// function removeLessonClicked(event) {
  // var lesson = Event.element(event).parentNode;
  // var id = lesson.id.replace("selectedLesson_","");
  // var addButton = $('availableLesson_'+id).select('div.addLesson')[0]
  // 
  // Event.element(event).parentNode.remove();
  // 
  // addButton.removeClassName('inactive');
  // addButton.observe('click', addLessonClicked);
  // $('availableLesson_'+id).show();
  // 
  // Sortable.create('selectedLessons', {
    // constraint: 'horizontal',
    // overlap: 'horizontal'
  // });
  // 
  // sourceList.initList();
  // targetList.initList();
// }
// 
// function initSlidingLists() {	
  // if ($('availableLessons')) {
  // 
    // sourceList = new SlidingList($('availableLessons'));
    // 
    // $('availableLessons').select('li').each(function(item) {
	 // /*   if (!item.hasClassName('inactive')) {
    	  // item.select('div.addLesson')[0].observe('click', addLessonClicked);
    	// }*/
	  // });
	// }
	// 
	// if ($('selectedLessons')) {
    // targetList = new SlidingList($('selectedLessons'));
	  // 
	  // $('selectedLessons').select('li').each(function(item){
	    // item.select('div.removeLesson')[0].observe('click', removeLessonClicked);
	  // });
	  // 
	  // Sortable.create('selectedLessons', {
      // constraint: 'horizontal',
      // overlap: 'horizontal'
    // });	
	// }
	// 
	// if ($('lessons')) {
	  // lessonList = new SlidingList($('lessons'));
	// }
// }
  

// document.observe('dom:loaded', initSlidingLists);