/******************************
HTML Roller
var roller = new HtmlRoller ();
roller.setAttributes ({
					roller: "roler",
					canvas: "canvas",
					left : "left",
					right : "right"
				}); 
</script>
******************************/

function HtmlRoller () {};

HtmlRoller.prototype = {
					canvas : null,
					cloth : null,
					frame : null,
					child : null,
					clone : null,
					timer : null,
					left: null,
					right: null,
					width: null,
					height: null,
					clear : null,
					interval : 10,
					increment : 1,
					repeat : true,
					max_left : null,
					max_right: null,
					onmove: null,
					onload: null,
					event_start : "mouseover",
					event_end : "mouseout",
					moveleft: null,
					moveright : null,
					setAttributes : function (data) {
						//return;
						if (data ['event_start']) this.event_start = data ['event_start'];
						if (data ['event_end']) this.event_start = data ['event_end'];
						if (data ['increment']) this.increment = data ['increment'];
						
						//events
						if (data['max_left']) this.max_left= data['max_left'];
						if (data['max_right']) this.max_right = data['max_right'];
						if (data['onmove']) this.onmove = data['onmove'];
						if (data['onload']) this.onload = data['onload'];
						if (data['moveleft']) this.moveleft = data['moveleft'];
						if (data['moveright']) this.moveright= data['moveright'];
						
						this.repeat = data['repeat'];
						
						this.setObject (data.roller);
						this.setCanvas (data.canvas);
						this.setLeftControle (data.left);
						this.setRightControle (data.right);
						this.adjustElements ();
						
						if (this.onload) {
							this.onload(this);
						}
						
					},
					setObject  : function (c) {
						this.child= $(c); 
					},
					getCanvas : function () {
						return this.canvas;
					},
					setCanvas : function (c) {
						this.canvas= $(c); 
					},
					setLeftControle : function (l) {
						this.left = $(l);
					},
					setRightControle : function (r) {
						this.right = $(r);
					}, 
					adjustElements : function () {
						//console.log (this.canvas.offsetWidth);
						
						this.canvas.style.width = this.canvas.offsetWidth + "px"; 
						//this.child.style.width = this.child.offsetWidth + "px";
						var width = 0;
						for (i =0; i < this.child.childNodes.length; i ++) {
							
							if (this.child.childNodes[i].tagName && this.child.childNodes[i].tagName.toLowerCase() == "div") { 
								if (this.child.childNodes[i].style.marginLeft) width += parseInt(this.child.childNodes[i].style.marginLeft);
								if (this.child.childNodes[i].style.marginRight) width += parseInt(this.child.childNodes[i].style.marginRight); 
								width += this.child.childNodes[i].offsetWidth;
							}
						}
						this.child.style.width = width + "px";
						
						this.width = this.canvas.offsetWidth;
						
						this.child.style.height = this.canvas.style.height = this.canvas.offsetHeight + "px"; 
						
						if (this.repeat) this.child.style.cssFloat = "left";
						this.canvas.style.overflow = "hidden";
						
						this.cloth = document.createElement ("div");
						this.cloth.style.width = ((this.child.offsetWidth * 2 ) + 100) + "px";
						this.cloth.style.height = this.canvas.style.height;
						this.canvas.appendChild (this.cloth);
						this.cloth.appendChild (this.child);
						
						//this.child.style.position = "absolute";
						if (this.repeat) {
							this.clone = this.child.cloneNode (true);
							this.cloth.appendChild (this.clone);
							this.clone.id += "-clone";
						}
						//this.clone.style.marginLeft = (0 - this.width) + "px";
						
						this.clear = document.createElement ("br");
						this.clear.style.clear = "both";
						this.cloth.appendChild (this.clear);	
						this.addEvents ();
						//this.addEventsIE();
					},
					addEvents : function () {
						var _self = this;
						//alert (this.event_start);
						//alert (this.left.addEventListener);
                        //if (!document.addEventListener && document.attachEvent)
                        //if (document.addEventListener || !document.attachEvent)
            
						if (this.left) {
							if (document.addEventListener || !document.attachEvent) {
								this.left.addEventListener ( this.event_start, function () {
										if (_self.onmove) _self.onmove (_self);
										if (_self.repeat) _self.move_left ();
										else _self.shiftLeft();
								}, false); 
							
								this.left.addEventListener ( this.event_end, function () {
									_self.stop()
								}, false);
							} else if (!document.addEventListener && document.attachEvent) {
                                if (this.event_start == "click") {
                                    this.left.onclick = function () {
                                            if (_self.onmove) _self.onmove (_self);
                                            if (_self.repeat) _self.move_left ();
                                            else _self.shiftLeft();
                                    }
                                } else if (this.event_start == "mouseover") {
                                    this.left.onmouseover = function () {
                                            if (_self.onmove) _self.onmove (_self);
                                            if (_self.repeat) _self.move_left ();
                                            else _self.shiftLeft();
                                    }
                                
                                    this.left.onmouseout = function () {
                                        _self.stop()
                                    }
                                }
							}
						}
						
						if (this.right) {
							if (document.addEventListener || !document.attachEvent) {
								this.right.addEventListener ( this.event_start,function () {
										if (_self.onmove) _self.onmove (_self);
										if (_self.repeat) _self.move_right();
										else _self.shiftRight ();
								}, false); 
								
								this.right.addEventListener (  this.event_end, function () {
									_self.stop()
								}, false); 
							} else if (!document.addEventListener && document.attachEvent) {
								//IE hack
                                if (this.event_start == "click") {
                                    this.right.onclick = function () {
                                            if (_self.onmove) _self.onmove (_self);
                                            if (_self.repeat) _self.move_right();
                                            else _self.shiftRight ();
                                    }
                                } else if (this.event_start == "mouseover") {
                                    this.right.onmouseover = function () {
                                            if (_self.onmove) _self.onmove (_self);
                                            if (_self.repeat) _self.move_right();
                                            else _self.shiftRight ();
                                    }
                                    
                                    this.right.onmouseout = function () {
                                        _self.stop();
                                    }
                                }
							}
						}
				        },
					shiftRight : function () {
						var _self = this;
						if (this.moveright) this.moveright(_self);
						if (this.child.offsetWidth < this.canvas.offsetWidth) {return;}
						var incr = this.child.style.marginLeft ? parseInt ( this.child.style.marginLeft ) : 0;
						if ( ( incr * -1 ) >= ( this.child.offsetWidth - this.canvas.offsetWidth )) { 
								if (this.max_right) this.max_right(this); 
								this.stop (); 
								return;
						}
						this.child.style.marginLeft = (incr - this.increment) + "px";
						
						if (this.event_start == "click")  return;
						this.timer = window.setTimeout (function () {
							_self.shiftRight();
						},this.interval);
						
					},  
					shiftLeft: function () {
						var _self = this;
						if (this.moveleft) this.moveleft (_self); 
						if (this.child.offsetWidth < this.canvas.offsetWidth) {return;}
						var incr = this.child.style.marginLeft ? parseInt ( this.child.style.marginLeft ) : 0;
						
						if ( incr == 0) { 
							if (this.max_left) this.max_left (this);
							this.stop (); 
							return;
						}
						this.child.style.marginLeft = (incr + this.increment) + "px";
						
						if (this.event_start == "click")  return;
						this.timer = window.setTimeout (function () {
							_self.shiftLeft();
						},this.interval);
						
					},  
					move_left : function () {
								var _self = this; 

								var rightm = this.child.style.marginLeft? parseInt (this.child.style.marginLeft) : this.width;
								var leftm = this.clone.style.marginRight?  parseInt (this.clone.style.marginRight) : 0;
								//console.log  (leftm);
								if (rightm == 0) {
									rightm = this.width;
									leftm =0;
								}

								if (rightm >= 0) {
									rightm = rightm * -1; 
								}
								//$('deedback').innerHTML += "[" + this.child.style.marginLeft + "] - ["  + this.clone.style.marginRight + "]<br/>";
								this.child.style.marginLeft = (rightm + this.increment) + "px";
								this.clone.style.marginRight= (leftm - this.increment) + "px";
								
								if (this.event_start != "click")  {									
									this.timer = window.setTimeout (function () {
										_self.move_left ();
									},this.interval);
								}
							},
							move_right: function () {
								var _self = this; 
						
								var rightm = this.child.style.marginLeft ? parseInt (this.child.style.marginLeft) : 0;
								var leftm = this.clone.style.marginRight ?  parseInt (this.clone.style.marginRight) : this.width;
								//console.log  (leftm);
								if (leftm== 0) {
									rightm = 0;
									leftm = this.width;
								}
								if (leftm >= 0) {
									leftm = leftm * -1; 
								}
						
								this.child.style.marginLeft = (rightm - this.increment) + "px";
								this.clone.style.marginRight= (leftm + this.increment) + "px";
								
								if (this.event_start != "click")  {	
									this.timer = window.setTimeout (function () {
										_self.move_right ();
									},this.interval);
								}
						
							},
							stop : function () {
								window.clearTimeout (this.timer);
							}, 
							addEventsIE : function  () {
								_self = this;
								var left = function () {
									
									if (_self.onmove) _self.onmove (_self);
									if (_self.repeat) _self.move_left ();
									else _self.shiftLeft();
								}
								
								var right = function () {
									if (_self.onmove) _self.onmove (_self);
									if (_self.repeat) _self.move_right();
									else _self.shiftRight ();
								}
								
								switch (this.event_start) {
									case "click": 
										this.left.onclick = left;
										this.right.onclick = right;
									break;
									case "mousedown": 
										this.left.onmousedown= left;
										this.right.onmousedown= right;
									break;
									case "mouseover": 
										alert (2);
										alert (this.left);
										this.left.onmouseover= left = function () {
												alert (1);
												if (_self.onmove) _self.onmove (_self);
												if (_self.repeat) _self.move_left ();
												else _self.shiftLeft();
											};
										this.right.onmouseover= right;
									break;
								}
								
								switch (this.event_end) {
									case "click": 
										this.left.onclick = this.right.onclick = function () { _self.stop(); }
									break;
									case "mousedown": 
										this.left.onmousedown = this.right.onmousedown= function () { _self.stop(); }
									break;
									case "mouseover": 
										this.left.onmouseover= this.right.onmouseover= function () { _self.stop(); }
									break;
									case "mouseout": 
										this.left.onmouseout= this.right.onmouseout= function () { _self.stop(); }
									break;
								}
							}
				};