var ScrollBuilder = Class.create({ initialize: function () { }, CreateScrollerWithinDiv: function (elName) { $(elName).select("div[GSWidget=miniScroller]").each(function (s) { this.CreateNewScroller(s) } .bind(this)) }, CreateNewScroller: function (el) { var pageType = "product"; var linkRoot = ""; var newOptions = {}; if (el.readAttribute("GSWidgetParams") != "") { var myJSON = el.readAttribute("GSWidgetParams").evalJSON(); pageType = myJSON.pageType; linkRoot = myJSON.linkRoot; newOptions = myJSON.options } if (el.select("div[GSWscrl]")[0].innerHTML.stripTags().replace(/\n\t/, "").evalJSON().length > 3) { new CyclicScroller(el, linkRoot, newOptions) } else { new LinearScroller(el, linkRoot, newOptions) } } }); var mainScrollBuilder = new ScrollBuilder(); var LinearScroller = Class.create({ initialize: function (el, linkRoot, options) { this.options = options; this.el = el; this.linkRoot = linkRoot; this.items = []; this.CreateItems(); if (this.items.length > 0) { this.GetFirstItems(); this.CreateMarkUp(); this.Render() } }, CreateMarkUp: function () { this.options = Object.extend({ maxMainHeight: 100, maxMainWidth: 100, maxMinorHeight: 40, maxMinorWidth: 40, nextBtnSrc: "App_Themes/Av7/images/all-lang/common/arrow_lpink.png", previousBtnSrc: "App_Themes/Av7/images/all-lang/common/arrow_rpink.png" }, this.options || {}); this.options.mainAR = this.options.maxMainWidth / this.options.maxMainHeight; this.options.minorAR = this.options.maxMinorWidth / this.options.maxMinorHeight; this.leftBoxDivButtonL = new Element("div", { "class": "leftBoxDivButtonL" }); this.el.insert({ bottom: this.leftBoxDivButtonL }); if (this.options.previousBtnID) { this.previousBtn = $(this.options.previousBtnID) } else { this.previousBtn = new Element("img", { alt: "", style: "cursor:pointer", src: absoluteRoot + this.options.previousBtnSrc }); this.leftBoxDivButtonL.insert({ bottom: this.previousBtn }) } this.previousBtn.observe("click", this.Previous.bindAsEventListener(this)); this.leftBoxDivCentre = new Element("div", { "class": "leftBoxDivCentre" }); this.el.insert({ bottom: this.leftBoxDivCentre }); this.leftBoxDivImages = new Element("div", { "class": "leftBoxMinorImageDiv" }); this.leftBoxDivCentre.insert({ bottom: this.leftBoxDivImages }); this.leftBoxInsideMinorImageDivLeft = new Element("div", { "class": "leftBoxInsideMinorImageDiv" }); this.leftBoxDivImages.insert({ bottom: this.leftBoxInsideMinorImageDivLeft }); this.left = {}; if (this.options.leftImgID) { this.left.img = $(this.options.leftImgID) } else { this.left.img = new ImagePlus(this.options.maxMinorWidth, this.options.maxMinorHeight, "imgFriendsLeft"); this.leftBoxInsideMinorImageDivLeft.insert({ bottom: this.left.img.Render() }) } this.left.link = new Element("a"); this.left.img.img.wrap(this.left.link); this.leftBoxInsideMinorImageDivRight = new Element("div", { "class": "leftBoxInsideMinorImageDiv" }); this.leftBoxDivImages.insert({ bottom: this.leftBoxInsideMinorImageDivRight }); this.right = {}; if (this.options.rightImgID) { this.right.img = $(this.options.rightImgID) } else { this.right.img = new ImagePlus(this.options.maxMinorWidth, this.options.maxMinorHeight, "imgFriendsRight"); this.leftBoxInsideMinorImageDivRight.insert({ bottom: this.right.img.Render() }) } this.right.link = new Element("a"); this.right.img.img.wrap(this.right.link); this.leftBoxDivCentre.insert({ bottom: "<br />" }); this.mainLink1 = new Element("a", { "class": "leftMainName" }); this.leftBoxDivCentre.insert({ bottom: this.mainLink1 }); if (this.options.mainNameID) { this.mainName = $(this.options.mainNameID) } else { this.mainName = new Element("span"); this.mainLink1.insert({ bottom: this.mainName }) } this.leftBoxMainImageDiv = new Element("div", { "class": "leftBoxMainImageDiv" }); this.leftBoxDivCentre.insert({ bottom: this.leftBoxMainImageDiv }); this.mainLink2 = new Element("a"); this.leftBoxMainImageDiv.insert({ bottom: this.mainLink2 }); if (this.options.mainImgID) { this.mainImg = $(this.options.mainImgID) } else { this.mainImg = new ImagePlus(this.options.maxMainWidth, this.options.maxMainHeight, "imgFriendsCentre"); this.mainLink2.insert({ bottom: this.mainImg.Render() }) } this.leftBoxDivButtonR = new Element("div", { "class": "leftBoxDivButtonR" }); this.el.insert({ bottom: this.leftBoxDivButtonR }); if (this.options.nextBtnID) { this.nextBtn = $(this.options.nextBtnID) } else { this.nextBtn = new Element("img", { alt: "", style: "cursor:pointer", src: absoluteRoot + this.options.nextBtnSrc }); this.leftBoxDivButtonR.insert({ bottom: this.nextBtn }) } this.nextBtn.observe("click", this.Next.bindAsEventListener(this)) }, CreateItems: function () { this.el.select("div[GSWscrl]")[0].innerHTML.stripTags().evalJSON().each(function (s) { if (s.id) { s.src = s.src.gsub("&amp;", "&"); this.items.push(new SliderItemProduct(s)) } } .bind(this)) }, GetFirstItems: function () { this.CI = []; this.CI.push(-1); if (this.items.length > 0) { this.CI.push(0) } else { this.CI.push(-1) } if (this.items.length > 1) { this.CI.push(1) } else { this.CI.push(-1) } }, Next: function () { if (this.CI.last() == -1) { return } if (this.CI.last() + 1 < this.items.length) { this.CI.push(this.CI.last() + 1) } else { this.CI.push(-1) } this.CI.shift(); this.Render() }, Previous: function () { if (this.CI[0] == -1) { return } if (this.CI[0] - 1 >= 0) { this.CI.unshift(this.CI[0] - 1) } else { this.CI.unshift(-1) } this.CI.pop(); this.Render() }, Render: function () { if (this.CI[0] >= 0) { this.RenderMinor(this.items[this.CI[0]], this.left) } else { this.Hide(this.left) } if (this.CI[1] >= 0) { this.RenderMain(this.items[this.CI[1]]) } if (this.CI[2] >= 0) { this.RenderMinor(this.items[this.CI[2]], this.right) } else { this.Hide(this.right) } }, RenderMain: function (item) { this.mainImg.UpdateURL(item.src); this.mainImg.img.alt = item.name; this.mainImg.img.title = item.name; this.mainName.update(item.name); this.mainLink1.href = this.mainLink2.href = this.GetLink(item.id) }, RenderMinor: function (item, element) { element.img.img.show(); element.img.UpdateURL(item.src); element.img.img.alt = item.name; element.link.href = this.GetLink(item.id) }, GetLink: function (id) { return this.linkRoot + id }, Hide: function (element) { element.img.img.hide() } }); var CyclicScroller = Class.create(LinearScroller, { GetFirstItems: function () { this.CI = []; this.CI.push(this.items.length - 1); if (this.items.length > 0) { this.CI.push(0) } if (this.items.length > 1) { this.CI.push(1) } }, Previous: function () { if (this.CI.last() + 1 < this.items.length) { this.CI.push(this.CI.last() + 1) } else { this.CI.push(0) } this.CI.shift(); this.Render() }, Next: function () { if (this.CI[0] > 0) { this.CI.unshift(this.CI[0] - 1) } else { this.CI.unshift(this.items.length - 1) } this.CI.pop(); this.Render() } }); var SliderItemProduct = Class.create({ initialize: function (values) { this.name = values.name; this.id = values.id; this.src = values.src } }); var ImagePlus = Class.create({ initialize: function (maxWidth, maxHeight, CssClass) { this.maxHeight = maxHeight; this.maxWidth = maxWidth; this.CssClass = CssClass || ""; this.img = new Element("img", { "class": this.CssClass }); this.img.observe("load", this.CheckSize.bindAsEventListener(this)) }, Render: function () { return this.img }, UpdateURL: function (newSrc) { this.img.src = newSrc }, CheckSize: function () { var ar = this.img.getWidth() / this.img.getHeight(); this.img.width = Math.min(this.maxWidth, ar * this.maxHeight) } });