/**********************************************************************
Handles the list scroll
1. Hides the whole content
2. Generates container for the scroller with handles
3. Generates shortcuts to view items
4. Creates tip boxes for the book
**********************************************************************/
var SCROLL_HEIGHT = 300;
var SCROLL_WIDTH = 560;
var LI_WIDTH = 170;
var LI_HEIGHT = 300;
var ROW_SIZE = 7;
var CURRENT_ELEMENT = '0';
var TOTAL_ELEMENTS = 0;
var list_scroll = 
{
	init: function(){
        $('scroller').setStyle('display','none');
        var new_scroller_wrapper = new Element('div', {
                                               'id' : 'new_scroller_wrapper'
                                               });
        new_scroller_wrapper.injectBefore('scroller')
        var new_scroller = new Element('div', {
                                               'id' : 'new_scroller'
                                               });
        new_scroller.injectInside(new_scroller_wrapper)
        var scroll_fx = new Fx.Scroll('new_scroller', {
                                                	wait: false,
                                                	duration: 1000,
                                                	offset: {'x': 0, 'y': 0},
                                                	transition: Fx.Transitions.Quad.easeInOut
                                                   });
        TOTAL_ELEMENTS = $$('li.product_element').length;
        total_rows = (TOTAL_ELEMENTS / ROW_SIZE) - ((TOTAL_ELEMENTS%ROW_SIZE)/ ROW_SIZE) + 1;
        canvas_width = (LI_WIDTH * ROW_SIZE) + LI_WIDTH;		//we will add one extra li
		/*
        if(!(window.ie)){
            canvas_width += (LI_WIDTH * 2)
        }
		*/
        canvas_height = LI_HEIGHT * total_rows;
        var scroller_ul = new Element('ul',{
                                            'id' : 'scroller_list',
                                            'class' : 'clearfix',
                                            'styles' : {
                                                        'width': canvas_width,
                                                        'height': canvas_height
                                                       }
                                           });
        scroller_ul.injectInside(new_scroller);
        // Right handle
        var scroller_right_handle = new Element('a',{
									'id' : 'scroller_right_handle',
									'class' : 'replaced clearfix',
									'events': {
												'click' : function(el){
													new Event(el).stop();
													destination = 'element'
													next = parseInt(CURRENT_ELEMENT)+1
													if (next >= TOTAL_ELEMENTS){
														CURRENT_ELEMENT = 0
													}else{
														if((next+1)%ROW_SIZE == 0){		// Next element is new row
															CURRENT_ELEMENT = next + 1
														}else{
															CURRENT_ELEMENT = next
														}
													}
													destination += CURRENT_ELEMENT
													scroll_fx.toElement(destination);
												},
												'mouseenter': function(ev){
													tip_box.empty();
												}
											  }
								   }).setHTML('Next');
        scroller_right_handle.injectInside(new_scroller_wrapper);
        // Left handle
        var scroller_left_handle = new Element('a',{
									'id' : 'scroller_left_handle',
									'class' : 'replaced clearfix',
									'events': {
												'click' : function(el){
													new Event(el).stop();
													destination = 'element'
													previous = parseInt(CURRENT_ELEMENT)-1;
													if (previous < 0){
														CURRENT_ELEMENT = TOTAL_ELEMENTS - 1
													}else{
														if((previous+1)%ROW_SIZE == 0){		// Previous element is new row
															CURRENT_ELEMENT = previous - 1;
														}else{
															CURRENT_ELEMENT = previous;
														}
													}
													destination += CURRENT_ELEMENT
													scroll_fx.toElement(destination);
												},
												'mouseenter': function(ev){
													tip_box.empty();
												}
											  }
									}).setHTML('Previous');
        scroller_left_handle.injectInside(new_scroller_wrapper);

        //Container for the products
        var tip_box = new Element('div',{'id' : 'tip_box'});
        tip_box.injectInside(document.body);
        var fx = new Fx.Styles(tip_box, {duration:500, wait:false});
        // Iteration over the list
        $$('li.product_element').each(function(element,i){
            element_id = 'element'+i;
            if(i%ROW_SIZE == 0){		// New row
                element.setStyle('clear','left');
            }
			if((i+1)%ROW_SIZE == 0){		// Next element is new row
				element.setStyle('width',LI_WIDTH*2);
			}
            title = element.getElement('h3 a');
            title.setProperty('id','scrollto_'+element_id);
            element.setProperty('id',element_id);
            element.injectInside(scroller_ul);
            element.addEvents({
			   'mouseenter': function(event){
								tip_box.empty();
								new Event(event).stop();
								element_clone = element.clone(true);
								var tip_box_content = new Element('div',{'id' : 'tip_box_content'});
								tip_box_content.injectInside(tip_box)
								tip_box_content.setHTML(element_clone.innerHTML);
								var tip_box_tail = new Element('div',{'id' : 'tip_box_tail'});
								tip_box_tail.injectInside(tip_box)
								position = new_scroller.getPosition();
								// get the actual position considering the overflow
								position_element = this.getPosition([new_scroller]);
								position_ul = scroller_ul.getPosition();
								size = new_scroller.getCoordinates();
								tip_box.setStyles({
									'top' : position.y - tip_box.getSize().size.y + 90,
									'left' : position_element.x + 25,
									'opacity': 0
								});
                                if(!window.ie6){
                                    fx.start({
                                        'opacity': 1
                                    });
                                }else{
                                    tip_box.setStyle('opacity',1);
                                }
							},
			   'click': function(event){
								new Event(event).stop();
                                if(!window.ie6){
                                    fx.start({
                                        'opacity': 0
                                    });
                                }else{
                                    tip_box.setStyle('opacity',0);
                                }
						}
			});
        });
	}
}

window.addEvent
(
	'domready',
	function()
	{
		list_scroll.init();
	}
);