/* usage:
*/
function Slider(mainDiv, scrollTime, frames){
this.currentIndex = 0;
this.currentPosition = 0;
this.lock = false;
this.scrollTime = scrollTime;
this.ticks = frames;
this.mainDiv = $(mainDiv);
this.mainDiv.slider = this;
this.mainDiv.className = "slider";
this.sliderBody = FindChildElementsByClass(this.mainDiv, "slider_body", true)[0];
this.leftButton = FindChildElementsByClass(this.mainDiv, "slider_left", true)[0];
this.rightButton = FindChildElementsByClass(this.mainDiv, "slider_right", true)[0];
this.scrollContainer = FindChildElementsByClass(this.mainDiv, "slider_scroll_container", true)[0];
this.scroller= FindChildElementsByClass(this.mainDiv, "slider_scroller", true)[0];
this.cells = FindChildElementsByClass(this.mainDiv, "slider_cell", false);
this.leftOverlay = FindChildElementsByClass(this.mainDiv, "slider_overlay_left", true)[0];
this.rightOverlay = FindChildElementsByClass(this.mainDiv, "slider_overlay_right", true)[0];
this.mainDiv.setStyle("float:left;overflow:hidden");
this.sliderBody.setStyle("overflow:hidden;position:relative;");
this.sliderBody.setStyle("width:"+ this.mainDiv.getWidth() +"px");
this.sliderBody.setStyle("height:"+ this.mainDiv.getHeight() +"px");
this.scrollContainer.setStyle("position:relative;overflow:hidden");
this.scrollContainer.setStyle("width:"+ this.mainDiv.getWidth() +"px");
this.scrollContainer.setStyle("height:"+ this.mainDiv.getHeight() +"px");
this.cells[0].insert({'before':''});
this.cells[this.cells.length-1].insert({'after':''});
this.cells = FindChildElementsByClass(this.mainDiv, "slider_cell", false);
this.cells.each(function(elem, index){elem.setStyle("float:left;padding-top:10px");});//;margin-left:2px;margin-right:2px");});
this.scroller.setStyle("width:"+ (this.cells.length * this.cells[1].getWidth() ) +"px;");
this.leftOverlay.setStyle("position:relative;float:left;");
this.leftOverlay.setStyle("width:100px");
this.leftOverlay.setStyle("left:0px");
this.leftOverlay.setStyle("top:" + ( -1 * this.mainDiv.getHeight() ) +"px");
this.leftOverlay.setStyle("height:"+this.mainDiv.getHeight()+"px");
this.leftOverlay.setStyle("zIndex:10");
if (Prototype.Browser.IE){
//this.leftOverlay.setStyle("background-color: silver");
//this.leftOverlay.setOpacity(.75);
//this.leftOverlay.setStyle("background: url(/slider/overlay_left.gif) repeat-y");
this.leftOverlay.setStyle("progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/slider/overlay_left.png',sizingMethod='scale')");
}else{
this.leftOverlay.setStyle("background: url(/slider/overlay_left.png) repeat-y");
}
this.rightOverlay.setStyle("position:relative;float:left");
this.rightOverlay.setStyle("width:100px");
this.rightOverlay.setStyle("left:"+ ( this.mainDiv.getWidth() - this.rightOverlay.getWidth() - this.leftOverlay.getWidth() ) +"px");
this.rightOverlay.setStyle("top:" + ( -1 * this.mainDiv.getHeight() ) +"px");
this.rightOverlay.setStyle("height:"+this.mainDiv.getHeight()+"px");
this.rightOverlay.setStyle("zIndex:10");
if (Prototype.Browser.IE){
//this.rightOverlay.setStyle("background-color: silver");
//this.rightOverlay.setOpacity(.75);
//this.rightOverlay.setStyle("background: transparent url(/slider/overlay_right.gif) repeat-y");
this.rightOverlay.setStyle("progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/slider/overlay_right.png',sizingMethod='scale')");
}else{
this.rightOverlay.setStyle("background: transparent url(/slider/overlay_right.png) repeat-y");
}
this.leftButton.setStyle("float:left;position:relative;width:31px;height:31px;");
this.leftButton.setStyle("left: "+ ( (this.leftOverlay.getWidth() - this.leftButton.getWidth())/2 ) + "px");
this.leftButton.setStyle("top:" + ( (this.leftOverlay.getHeight()- this.leftButton.getHeight())/2) + "px");
this.leftButton.setStyle("zIndex:20");
this.leftButton.setStyle("background: transparent url(/slider/button-left.gif) no-repeat scroll left top");
this.leftButton.observe("mouseover", function(ev){
ev.target.setStyle("background: transparent url(/slider/button-left.gif) no-repeat scroll left bottom");
});
this.leftButton.observe("mouseout", function(ev){
ev.target.setStyle("background: transparent url(/slider/button-left.gif) no-repeat scroll left top");
});
this.leftButton.setOpacity("0.30");
this.rightButton.setStyle("float:left;position:relative;width:31px;height:31px;");
this.rightButton.setStyle("left: "+ ( (this.rightOverlay.getWidth() - this.rightButton.getWidth())/2 ) + "px");
this.rightButton.setStyle("top:" + ( (this.rightOverlay.getHeight()- this.rightButton.getHeight())/2) + "px");
this.rightButton.setStyle("zIndex:20");
this.rightButton.setStyle("background: transparent url(/slider/button-right.gif) no-repeat scroll left top");
this.rightButton.observe("mouseover", function(ev){
ev.target.setStyle("background: transparent url(/slider/button-right.gif) no-repeat scroll left bottom");
});
this.rightButton.observe("mouseout", function(ev){
ev.target.setStyle("background: transparent url(/slider/button-right.gif) no-repeat scroll left top");
});
this.mainDiv.setOpacity(1);
this.animationFunction = function(val) {
return (-Math.cos(val * Math.PI) / 2) + 0.5;
//return val;
}
this.scroll_ = function(index) {
if (this.lock){
return false;
}
this.lock = true;
var state = new Object();
state.totalOffset = index * (this.cells[1].offsetWidth);
state.desiredOffset = state.totalOffset - this.currentPosition;
state.timeIndex = 0;
state.interval = 0;
state.scroller = this;
state.tick = (state.scroller.scrollTime / state.scroller.ticks);
function animate(state) {
//DEBUG = true;
TimerStart("ANIMATE1");
state.timeIndex += state.tick;
TimerStop("ANIMATE1");
TimerStart("ANIMATE2");
var delta = state.scroller.animationFunction(state.timeIndex / state.scroller.scrollTime) * state.desiredOffset;
TimerStop("ANIMATE2");
if (state.timeIndex > state.scroller.scrollTime) {
clearInterval(state.interval);
state.scroller.currentPosition = state.scroller.scrollContainer.scrollLeft;
state.scroller.lock = false;
return;
}
TimerStart("ANIMATE3");
TimerStart("ANIMATE3.1");
var currPos = state.scroller.currentPosition;
TimerStop("ANIMATE3.1");
TimerStart("ANIMATE3.2");
currPos += delta;
TimerStop("ANIMATE3.2");
TimerStart("ANIMATE3.3");
var sc = state.scroller.scrollContainer;
TimerStop("ANIMATE3.3");
TimerStart("ANIMATE3.4");
sc.scrollLeft = currPos;
TimerStop("ANIMATE3.4");
TimerStop("ANIMATE3");
}
state.interval = setInterval(function() { animate(state); }, state.tick);
return true;
}
this.scrollLeft = function(){
if (this.currentIndex == 0)
return;
if (this.scroll_(this.currentIndex-1)){
this.currentIndex--;
}
this.rightButton.setOpacity("1");
if (this.currentIndex == 0){
this.leftButton.setOpacity("0.30");
}
}
this.scrollRight = function(){
if (this.currentIndex >= this.cells.length-3)
return;
if(this.scroll_(this.currentIndex+1)){
this.currentIndex++;
}
this.leftButton.setOpacity("1");
if (this.currentIndex >= this.cells.length-3)
this.rightButton.setOpacity("0.30");
}
this.leftButton.observe('click', function(ev){
FindMySlider(ev.target).scrollLeft();
});
this.rightButton.observe('click', function(ev){
FindMySlider(ev.target).scrollRight();
});
};
function FindMySlider(sliderElement){
scrollerElement = $(sliderElement);
var node = sliderElement;
while (node != undefined && node.slider== undefined){
node = node.parentNode;
}
return node.slider;
}
function FindChildElementsByClass(elem, className, one){
elem = $(elem);
debugPrint("looking for " + className + " children of " + elem.inspect());
var ret = new Array();
var children = elem.childElements();
var child;
for (var i =0; i < children.length; i++){
child = children[i];
debugPrint("working on "+ child.inspect());
if (child.className != undefined && child.className == className){
debugPrint("FOUND IT");
ret[ret.length] = child;
}
if (one != undefined && one && ret.length >0)
break;
else{
ret = ret.concat(FindChildElementsByClass(child, className, one));
}
}
debugPrint("RETURNING: " + DebugArrayOfElements(ret));
return ret;
}
function DebugArrayOfElements(array){
var ret = "[";
for (var i = 0; i < array.length; i++){
ret += array[i].inspect() + " , ";
}
if (ret.substr(ret.length - 3, 3) == " , ")
ret = ret.substring(0, ret.length-3);
ret = ret + "]";
return ret;
}