Print

function clearForm(elm_id) { document.forms[1].q_manu.value=''; document.forms[1].q_cat.value=''; document.forms[1].q_subcat.value=''; document.forms[1].q_model_num.value=''; document.forms[1].q_cond.value=''; } // if(Browser.Engine.trident) // { // if($defined(window.console)) // { // if($defined(window.console.log)) // dbug = window.console; //{ log:function(p1, p2){ console.log(p1, p2) } } // } // else // dbug = { 'log' : $empty } // } // else // dbug.enable(); function printContent(el) { if(!$(el)) return; el = $(el); var styles = $$('link'); var linktag = ''; var linktags = ''; styles.each(function(style){ linktags += linktag.replace('{style}', style.get('href')); }); var html = ''; html += ''; html += ''; html += ' Print'; html += ' '; html += ' '; html += linktags; html += ''; html += '

'; html += '

'; html += el.get('html'); html += '

Copyright © by internationalmetal.com | All Right Reserved.

' html += '

'; // dbug.log(styles); var w = window.open('', "printContent", "width=740,height=325,top=200,left=250,toolbars=no,scrollbars=yes,status=no,resizable=no"); w.document.writeln(html); w.document.close(); w.focus(); w.print(); w.close(); } /////////////////////////////////////// // THEGRID /////////////////////////////////////// var TheGrid = new Class({ Implements : [Options, Chain], options : { 'fixCols' : false, 'space' : 5, 'dir' : 'images/en/home/', 'tipPadding' : 20, 'tipBorder' : 5, 'tipBorderColor' : '#E6E6E6', 'message' : false, 'msgDuration' : 800, 'msgPause' : 3000 }, initialize : function(element, elements, options){ this.setOptions(options); if(!$(element)) return false; if($type(elements) != 'array') return false; this.element = $(element); this.elements = elements; }, grid : [], addToGrid : function(el, row, col){ if(!this.grid[row]) this.grid[row] = []; this.grid[row][col] = el; }, start : function(){ this.makeGrid(); }, makeGrid : function(){ this.gridWrapper = new Element('div', {'class':'TheGridWrapper'}).inject(this.element);; this.element_size = this.element.getDimensions(); this.rows = this.elements.length; this.cols = this.countCols(); this.thumb_size = { 'width' : ((this.element_size.width - (this.options.space * (this.cols-1))) / this.cols).toInt(), 'height' : ((this.element_size.height - (this.options.space * (this.rows-1))) / this.rows).toInt() }; this.elements.each(function(row, i){ this.makeRow(i); }, this); this.preloadImages(); }, countCols : function(){ var cols = 0; this.elements.each(function(row, i){ if(i == 0) cols = row.length; cols = (this.options.fixCols) ? Math.max(cols, row.length) : Math.min(cols, row.length); }, this); return cols; }, makeRow : function(row){ if($type(this.elements[row]) != 'array') return false; this.elements[row].each(function(item, col){ this.makeCell(row, col, item); }, this); }, makeCell : function(row, col, cell, options){ var el = false; if(cell === true && col > 0) el = this.setColspan(row, col); else if(cell === false && col > 0) el = this.setRowspan(row, col); if($(el)) return el; if($type(cell) == 'boolean') return false; el = new Element('div', { 'id' : 'cell'+ row + col, 'class' : 'gridCell', 'styles' : { // 'background' : '#FFFFFF', 'width' : this.thumb_size.width, 'height' : this.thumb_size.height, 'position': 'absolute', 'overflow': 'hidden' } }).inject(this.gridWrapper); var pos = el.setPosition({ 'relativeTo' : this.element, 'position' : 'leftTop', 'edge' : 'leftTop', 'returnPos' : true, 'offset' : { 'x' : (this.thumb_size.width + this.options.space) * col, 'y' : (this.thumb_size.height + this.options.space) * row } }); el.store('position', pos); el.store('gridContent', cell); el.setPosition({ 'relativeTo' : this.element, 'position' : 'leftTop', 'edge' : 'leftTop', 'offset' : { 'x' : (col >= (this.cols/2)) ? this.element_size.width + this.options.space : 0 - (this.thumb_size.width + this.options.space), 'y' : (row >= (this.rows/2)) ? this.element_size.height + this.options.space : 0 - (this.thumb_size.height + this.options.space) } }); this.addToGrid(el, row, col); }, preloadImages : function(){ var images = []; this.grid.each(function(row){ row.each(function(col){ if(!col) return; var cell = col.retrieve('gridContent'); images.include(this.options.dir + cell.thumb); if($defined(cell.image)) if(cell.image.clean() != '') images.include(this.options.dir + cell.image); if($defined(cell.over)) if(cell.over.clean() != '') images.include(this.options.dir + cell.over); }, this); }, this); var rest = $A(images); new Asset.images(images, { onProgress : function(loaded, current){ // imgname = images[current].split('/').getLast(); // rest.erase(images[current]); this.loading((loaded+1), images.length); // dbug.log(rest); }.bind(this), onComplete : function(){ this.loading(true); this.addImages(); }.bind(this) }); }, loading : function(loaded, total){ if(!$('gridLoading') && !this.gridLoading){ this.gridLoading = new Element('div', { 'id' : 'gridLoading', 'styles' : { 'border' : '1px solid #C8C8C8', 'font-size' : '0.8em', 'text-align' : 'center', 'width' : 500, 'height' : 50, 'background' : '#fff', 'overflow' : 'hidden' } }).inject(document.body); new Element('div', { 'class' : 'gridLoadingText', 'html' : 'loading...', 'styles': { 'display' : 'block' } }).inject(this.gridLoading); var barWrapper = new Element('div', { 'class' : 'gridLoadingBarWrapper', 'styles': { 'display' : 'block', 'width' : '90%', 'height' : 10, 'position': 'relative', 'border' : '1px solid #C8C8C8', 'overflow': 'hidden', 'margin' : '5px auto' } }).inject(this.gridLoading); new Element('div', { 'class' : 'gridLoadingBar', 'styles': { 'display' : 'block', 'background': '#646464', 'width' : 1, 'height' : 10 } }).inject(barWrapper); } this.gridLoading.setPosition({relativeTo : this.element}); if($type(loaded) == 'boolean'){ this.gridLoading.destroy(); this.gridLoading = false; return; } var t = this.gridLoading.getElement('.gridLoadingText'); var b = this.gridLoading.getElement('.gridLoadingBar'); var w = this.gridLoading.getElement('.gridLoadingBarWrapper'); if(!t || !b || !w) return; var wsize = w.getDimensions().width; var wpart = wsize / total; var percent = ((loaded / total) * 100).toInt(); // t.set('html', loaded + ' / ' + total); t.set('html', percent + '%'); b.setStyle('width', wpart*loaded); }, setTip : function(el){ $$('.gridTipThumbCloned').each(function(item){ item.destroy(); }); var cell = el.retrieve('gridContent'); if($defined(cell.effect)) if(cell.effect == 'slide') return this.setGridSlide(el); var thumb = el.getElement('img.thumb'); var image = new Asset.image('images/spacer.gif', {'class' : 'image'}); if($defined(cell.image)) if(cell.image.clean() != '') image = new Asset.image(this.options.dir + cell.image, {'class' : 'image'}); var size = el.getDimensions(); if(!$defined(this.gridTip) && !$('gridTip')){ this.gridTip = new Element('div', { 'id' : 'gridTip', 'class' : 'gridTip', 'styles': { 'position' : 'absolute', 'z-index' : 20000, 'overflow' : 'hidden', 'height' : size.height + (this.options.tipPadding*2) }, 'events' : { 'mouseleave' : function(){ this.setStyle('display', 'none') } } }).inject(document.body); this.gridTipWrapper = new Element('div', { 'class' : 'gridTipWrapper', 'styles': { 'padding' : this.options.tipPadding, 'display' : 'block' } }).inject(this.gridTip); this.gridTipThumb = new Element('div', { 'class' : 'gridTipThumb', 'styles' : { 'width' : this.thumb_size.width, 'height': this.thumb_size.height, 'display' : 'block', 'overflow' : 'hidden', 'float' : 'left' } }); this.gridTipImage = new Element('div', { 'class' : 'gridTipImage', 'styles' : { 'width' : image.width, 'height': image.height, 'overflow' : 'hidden', 'float' : 'left' // 'padding-left' : this.options.tipPadding } }); this.gridTipLink = new Element('a', { 'href' : 'javascript:void(0)', 'class': 'gridTipLink' }); } if($defined(cell.link)){ // this.gridTipLink.addEvent('click', function(){location.href = cell.link}); this.gridTipLink.set('href', cell.link); } var pos = el.getPosition(this.element); var alignLeft = (pos.x > (this.element_size.width/2)) ? true : false; var gridTipSize = this.gridTipWrapper.getDimensions(); this.gridTip.setStyles({ 'display' : 'block', 'width' : size.width, 'height' : size.height + this.options.tipPadding }); this.gridTipWrapper.empty(); this.gridTipImage.empty(); this.gridTipThumb.empty(); var thumb_cloned = thumb.clone(); var thumb_ext = this.getExt(thumb_cloned.get('src')); var thumb_src = thumb_cloned.get('src').substr(0, thumb_cloned.get('src').length - thumb_ext.length - 1) + '-on.' + thumb_ext; thumb_cloned.set('src', thumb_src); this.gridTipImage.adopt(image); this.gridTipThumb.adopt(this.gridTipLink); this.gridTipLink.adopt(thumb_cloned); var gridTipThumbCloned = this.gridTipThumb.clone().inject(document.body); gridTipThumbCloned.addClass('gridTipThumbCloned'); gridTipThumbCloned.setStyles({ 'position' : 'absolute', 'z-index' : 20001 }); gridTipThumbCloned.setPosition({ 'relativeTo' : el, 'position' : 'leftTop', 'edge' : 'leftTop' }); if(alignLeft) this.gridTipWrapper.adopt([this.gridTipImage, this.gridTipThumb]); else this.gridTipWrapper.adopt([this.gridTipThumb, this.gridTipImage]); this.gridTipWrapper.setStyles({ 'width' : image.width + thumb.width + (this.options.tipPadding * 5) }); if(alignLeft){ this.gridTip.setPosition({ 'relativeTo' : el, 'position' : 'rightTop', 'edge' : 'rightTop', 'offset' : { y : -(this.options.tipPadding), x : (this.options.tipPadding) } }); } else { this.gridTip.setPosition({ 'relativeTo' : el, 'position' : 'leftTop', 'edge' : 'leftTop', 'offset' : { y : -(this.options.tipPadding), x : -(this.options.tipPadding) } }); } this.gridTip.setStyles({'display' : 'none'}); var fxreveal = new Fx.Reveal(this.gridTip, { duration : 300, mode : 'both', onComplete : function(){ gridTipThumbCloned.destroy(); } }); fxreveal.reveal(); }, getExt : function(f) { if($type(f) != 'string') return ''; return f.split('.').getLast(); }, setGridSlide : function(el){ var cell = el.retrieve('gridContent'); var image = el.getElement('img.image'); var thumb = el.getElement('img.thumb'); if(!image || !thumb) return; el.addEvent('mouseleave', function(){ // new Fx.Tween(this.getElement('img.thumb'), {duration : 300}).start('top', 0); new Fx.Elements([thumb, image], {duration : 300}).start({ '0' : {'top':0}, '1' : {'top':-this.getDimensions().height} }); }); image.setStyle('top', -el.getDimensions().height); new Fx.Elements([thumb, image], {duration : 300}).start({ '0' : {'top':el.getDimensions().height}, '1' : {'top':0} }); if($defined(cell.link)) el.addEvent('click', function(){ location.href = cell.link }) }, addImages : function(){ this.grid.each(function(row){ row.each(function(col){ if(!col) return; var cell = col.retrieve('gridContent'); if($defined(cell.effect)){ if(cell.effect == 'slide'){ new Asset.image(this.options.dir + cell.image, {'class' : 'image'}).inject(col); col.addClass('gridCellSlide') } } new Asset.image(this.options.dir + cell.thumb, {'class' : 'thumb'}).inject(col); col.addEvent('mouseenter', this.setTip.pass(col, this)); col.setStyle('cursor', 'pointer'); }, this); }, this); if($type(this.options.message) == 'string' || $type(this.options.message) == 'array') this.setMessage.delay(500, this); else this.animate.delay(500, this); }, animate : function(){ var fxobject = {}; var elements = []; var fxs = []; var i=0; this.grid.each(function(row){ row.each(function(col){ if(!col) return; var pos = col.retrieve('position'); fxobject[i] = { 'left' : pos.left, 'top' : pos.top } elements[i] = col; i++; }, this); }, this); // new Fx.Elements(elements, {duration:1000}).start(fxobject); elements.each(function(el, i){ var effect = new Fx.Morph(el, {duration:500}); effect.start.delay($random(1, 500),effect, fxobject[i]); }); }, setMessage : function(){ if($type(this.options.message) != 'string' && $type(this.options.message) != 'array') return this.animate(); this.message = new Element('div', { 'class' : 'gridMessages', 'styles' : { 'width' : this.element_size.width - 10, 'text-align' : 'center', 'display' : 'block' } }).inject(this.element); var msgChains = []; var messages = ($type(this.options.message) == 'string') ? [this.options.message] : this.options.message; messages.each(function(msg){ var msgEl = new Element('div', { 'class' : 'gridMessage', 'html' : msg, 'styles' : { 'text-align' : 'center', 'display' : 'block', 'opacity' : 0 } }).inject(this.message); msgChains.push( function(){ new Fx.Tween(msgEl, { duration:this.options.msgDuration, onComplete:function(){ this.callChain(); }.bind(this) }).start('opacity', 0, 1); }.bind(this) ); }, this); msgChains.push( function(){ this.callChain.delay(this.options.msgPause, this); }.bind(this) ); msgChains.push( function(){ new Fx.Tween(this.message, { duration:this.options.msgDuration, onComplete:function(){ this.message.destroy(); this.message = false; this.animate.delay(300, this); this.callChain(); }.bind(this) }).start('opacity', 1, 0); }.bind(this) ); this.message.setPosition({relativeTo:this.element}); this.chain(msgChains); this.callChain(); // new Fx.Tween(this.message, {duration:800}).start('opacity', 0, 1); }, setColspan : function(row, col, colspan){ colspan = (!$defined(colspan)) ? 2 : colspan; if(this.elements[row][col-1] === true && (col -1) > 0) return this.setColspan(row, col-1, colspan+1); var el = this.grid[row][col-1]; if(!el) return false; el.setStyle('width', (this.thumb_size.width * colspan) + (this.options.space * (colspan-1))); el.setPosition({ 'relativeTo' : this.element, 'position' : 'leftTop', 'edge' : 'leftTop', 'offset' : { 'x' : (col >= (this.cols/2)) ? this.element_size.width + this.options.space : 0 - (this.thumb_size.width + this.options.space), 'y' : (row >= (this.rows/2)) ? this.element_size.height + this.options.space : 0 - (this.thumb_size.height + this.options.space) } }); return el; }, setRowspan : function(row, col, rowspan){ rowspan = (!$defined(rowspan)) ? 2 : rowspan; if(this.elements[row-1][col] === false && (row -1) > 0) return this.setRowspan(row-1, col, rowspan+1); var el = this.grid[row-1][col]; if(!el) return false; el.setStyle('height', (this.thumb_size.height * rowspan) + (this.options.space * (rowspan-1))); return el; } }); /////////////////////////////////////// // MOOSLIDER /////////////////////////////////////// var MooSlider = new Class({ Implements: Options, options: { path : 'images/banners/', // path where are the images thumb: 'sm', // last part of file to know if is thumbnail over : '-over', // last part of thumbnail file to know if is thumbnail over container : null, // MooSlider element container effect : 'slide', // type of effect, slide (default) || fade show_buttons : 'auto', // show or hide prev, next buttons, auto (default) || true || false autoplay : false, // auto play the slider duration : 3000 // duration for autoplay sliders }, initialize: function(elements, options) { if(!$defined(options)) options = {}; this.setOptions(options); if(!this.options.container) return false; if(!$(this.options.container)) return false; if(!$defined(elements)) return false; if($type(elements) != 'array' && $type(elements) != 'object') return false; this.elements = elements; $(this.options.container).setStyles({'padding':0, 'margin':0}); if($type(elements) == 'object') this.elements = $H(elements); this.elements_type = $type(this.elements); this.setButtons(); }, /** * this function preload the MooSlider buttons and * make each button, callink the funcion makeButton * @return void */ setButtons : function() { var im = { 'out':[], 'ovr':[] }; var buttons = []; var items = (this.elements_type == 'hash') ? this.elements.getKeys() : this.elements items.each(function(item, i) { var src = item; var ext = this.getExt(src); var dot = '.'; src = src.replace(dot + ext, ''); im.out.push( this.options.path + src + this.options.thumb + dot + ext ); im.ovr.push( this.options.path + src + this.options.thumb + this.options.over + dot + ext ); }, this); var self = this; var images_out = new Asset.images(im.out, { onProgress : function(c, i){ if(self.elements_type == 'hash') buttons.push( self.makeCategories(i, this, im.ovr[i]) ); else buttons.push( self.makeButton(i, this, im.ovr[i]) ); }, onComplete : function(){ this.setLayout(buttons); }.bind(this) }); }, /** * This function make the layout * @param array, buttons */ setLayout : function(buttons) { var d = $(this.options.container).getDimensions(); var b = $(buttons[0]).getElement('img.out'); var l = buttons.getLast(); var slider_top = new Element('div', { 'styles' : { 'width' : d.width, 'height' : 300, 'overflow':'hidden'}, 'id' : 'MooSliderBig' }); var slider_top_wrapper = new Element('div', { 'styles' : { 'width' : d.width, 'position':'relative' }, 'id' : 'MooSliderBigWrapper' }); slider_top.adopt(slider_top_wrapper); var slider_bot = new Element('div', { 'styles' : { 'width' : d.width, 'height' : b.height, 'overflow':'hidden', 'position':'relative' }, 'class' : 'buttons', 'id' : 'MooSliderThumbs' }); var slider_wrapper = new Element('div', { 'styles' : { 'width' : l.getStyle('left').toInt() + l.getElement('img.out').width, 'height' : b.height, 'position':'relative' }, 'class' : 'buttons', 'id' : 'MooSliderWrapper' }); slider_wrapper.adopt(buttons); slider_bot.adopt(slider_wrapper); $(this.options.container).empty(); $(this.options.container).adopt([slider_top, slider_bot]); // make next prev buttons var btnprev = new Element('div', { 'id' : 'MooSliderButtonPrev', 'styles' : { 'width' : 20, 'height' : b.height, 'cursor' : 'pointer', 'position' : 'relative' }, 'events' : { 'click' : function(){ this.prev(); }.bind(this), 'mouseenter' : function(){ $('MooSliderButtonPrevModal').fade(1) }, 'mouseleave' : function(){ $('MooSliderButtonPrevModal').fade(0.8) } } }); var btnprev_modal = new Element('div', { 'id' : 'MooSliderButtonPrevModal', 'styles' : { 'width' : 20, 'height' : b.height, 'position' : 'absolute', 'opacity': 0.8, 'background' : '#F3F3F3' } }); var btnprev_image = new Element('div', { 'id' : 'MooSliderButtonPrevImage', 'styles' : { 'width' : 20, 'height' : b.height, 'position' : 'absolute', 'background' : 'url(images/prev.png) no-repeat 50% 50%' } }); btnprev.adopt([btnprev_modal, btnprev_image]); btnprev_modal.setPosition({relativeTo:btnprev}); btnprev_image.setPosition({relativeTo:btnprev}); var btnnext = new Element('div', { 'id' : 'MooSliderButtonNext', 'styles' : { 'width' : 20, 'height' : b.height, 'cursor' : 'pointer', 'position' : 'relative' }, 'events' : { 'click' : function(){ this.next(); }.bind(this), 'mouseenter' : function(){ $('MooSliderButtonNextModal').fade(1) }, 'mouseleave' : function(){ $('MooSliderButtonNextModal').fade(0.8) } } }); var btnnext_modal = new Element('div', { 'id' : 'MooSliderButtonNextModal', 'styles' : { 'width' : 20, 'height' : b.height, 'position' : 'absolute', 'opacity': 0.8, 'background' : '#F3F3F3' } }); var btnnext_image = new Element('div', { 'id' : 'MooSliderButtonNextImage', 'styles' : { 'width' : 20, 'height' : b.height, 'position' : 'absolute', 'background' : 'url(images/next.png) no-repeat 50% 50%' } }); btnnext.adopt([btnnext_modal, btnnext_image]); btnnext_modal.setPosition({relativeTo:btnnext}); btnnext_image.setPosition({relativeTo:btnnext}); slider_bot.adopt([btnprev, btnnext]); this.setButtonsPosition(); // this.preload(); if(this.elements_type == 'hash') this.showCategory(); else this.show(0); }, setButtonsPosition : function() { $('MooSliderButtonPrev').setPosition({ relativeTo:$('MooSliderThumbs'), position : 'leftTop' }); $('MooSliderButtonNext').setPosition({ relativeTo:$('MooSliderThumbs'), position : 'rightTop', offset : {x:-20} }); switch(this.options.show_buttons) { case 'auto': var hidebuttons = ($('MooSliderThumbs').getSize().x >= $('MooSliderWrapper').getSize().x); this.hideButtons(hidebuttons); break; case 1: case true: case 'yes': this.hideButtons(false); break; case 0: case false: case 'no': this.hideButtons(true); break; } }, hideButtons : function(hide) { if(hide) { $('MooSliderButtonPrev').hide(); $('MooSliderButtonNext').hide(); } else { $('MooSliderButtonPrev').show(); $('MooSliderButtonNext').show(); } }, disableButton : function(el) { if(!$(el)) return; $(el).getElement('a').fade(.5); var size = $(el).getSize(); var div = new Element('div', { 'class' : 'disabled', 'styles' : { 'width' : size.x, 'height' : size.y, 'opacity': .9, 'background' : '#FFFFFF url(http://www.cnet.com/html/rb/assets/global/waiter/waiter.gif) no-repeat 50% 50%' } }); div.inject($(el)); }, enableButton : function(el) { if(!$(el)) return; $(el).getElement('a').fade(1); var e = $(el).getElement('div.disabled'); // dbug.log($(el)); if(!e) return; e.destroy(); }, /** * this function preload the entire big images */ preload : function() { var self = this; var waiterc = new Element('div', {'styles':{ 'width':50, 'height':50 }}); waiterc.inject($('MooSliderBig')); waiterc.setPosition({ relativeTo : 'MooSliderBig', position : 'upperRight', edge : 'upperRight' }); var w = new Waiter(waiterc).start(); var slides = []; if(this.elements_type == 'hash') { var key = this.getCurrent(); var cat = this.getCategory() + '/'; this.elements.get(key).each(function(slide, pos){ slides.push(this.options.path + cat + slide); }, this); } else { this.elements.each(function(slide, pos){ slides.push(this.options.path + slide); }, this); } new Asset.images(slides, { onProgress : function(slide, pos) { this.set('id', 'MooSliderBig_' + pos); this.inject($('MooSliderBigWrapper')); this.setStyles({ 'position' : 'absolute', 'left' : (self.options.effect == 'slide') ? this.width * pos : 0, 'top' : 0 }); if(self.options.effect == 'fade') new Fx.Tween(this).set('opacity', 0); if(pos === 0) { $('MooSliderBig').show(); new Fx.Tween($('MooSliderBig'), {onComplete:self.setButtonsPosition.bind(self)}).start('height', this.height - $('MooSliderThumbs').getSize().y); } if(self.elements_type == 'array') self.enableButton.delay(500, self, 'MooSliderThum' + pos); }, onComplete : function(){ w.stop(); } }); }, /** * this function construct each button item * @param int position of the button in the this.elements array * @param element image of the button * @param string url of the over image of button * @return element */ makeButton : function(pos, img_out, img_ovr) { if(!this.elements[pos] || !img_out || !img_ovr) return null; var im_style = { 'position':'absolute', 'left':0, 'top':0 }; img_out.addClass('out'); img_out.setStyles(im_style); img_ovr = new Asset.image(img_ovr, {'class':'over'}); img_ovr.setStyles(im_style); img_ovr.fade('hide'); var div = new Element('div', { styles : {'display':'block', 'position':'absolute', 'left':(img_out.width * pos).toInt(), 'width':img_out.width, 'height':img_out.height}, 'id' : 'MooSliderThum' + pos }); var a = new Element('a', { 'href':'#', 'events' : { 'click' : function() { this.show(pos); return false; }.bind(this), 'mouseover' : function() { this.getElement('img.over').fade('in'); this.getElement('img.out').fade('out'); }, 'mouseout' : function() { if(this.hasClass('current')) return; this.getElement('img.over').fade('out'); this.getElement('img.out').fade('in'); } }, 'styles' : { 'position' : 'relative', 'padding' : 0, 'margin' : 0 } }); a.adopt([img_out, img_ovr]); div.adopt(a); this.disableButton.delay(500, this, div); // this.buttonswidth = ($defined(this.buttonswidth)) ? this.buttonswidth + img_out.width : img_out.width; return div; }, /** * this function construct each button item * @param int pos of the category key in this.elements hash * @param element image of the button * @param string url of the over image of button * @return element */ makeCategories : function(pos, img_out, img_ovr) { var key = this.elements.getKeys()[pos]; if(!this.elements.get(key) || !img_out || !img_ovr) return null; var im_style = { 'position':'absolute', 'left':0, 'top':0 }; img_out.addClass('out'); img_out.setStyles(im_style); img_ovr = new Asset.image(img_ovr, {'class':'over'}); img_ovr.setStyles(im_style); img_ovr.fade('hide'); var div = new Element('div', { styles : {'display':'block', 'position':'absolute', 'left':(img_out.width * pos).toInt(), 'width':img_out.width, 'height':img_out.height}, 'id' : 'MooSliderThum' + pos }); var a = new Element('a', { 'href':'#', 'category' : key, 'events' : { 'click' : function() { this.showCategory(key); return false; }.bind(this), 'mouseover' : function() { this.getElement('img.over').fade('in'); this.getElement('img.out').fade('out'); }, 'mouseout' : function() { if(this.hasClass('current')) return; this.getElement('img.over').fade('out'); this.getElement('img.out').fade('in'); } }, 'styles' : { 'position' : 'relative', 'padding' : 0, 'margin' : 0 } }); a.adopt([img_out, img_ovr]); div.adopt(a); // this.disableButton.delay(500, this, div); // this.buttonswidth = ($defined(this.buttonswidth)) ? this.buttonswidth + img_out.width : img_out.width; return div; }, /** * get the file extension */ getExt : function(f) { if($type(f) != 'string') return ''; return f.split('.').getLast(); }, /** * this funcion show the entire category */ showCategory: function(key) { if(!$defined(key) || !this.elements.has(key)) key = this.getCurrent(); var slides = this.elements.get(key); this.setCurrent(key); this.position = 0; if($('MooSliderBigWrapper')) { new Fx.Tween($('MooSliderBigWrapper'), { onComplete : function(){ $('MooSliderBigWrapper').empty(); $('MooSliderBigWrapper').fade('show'); this.show(0, slides); }.bind(this) }).start('opacity', 0); } else this.show(0, slides); }, /** * this function show the current image */ show : function(pos, elements) { if($defined(this.timer)) this.timer = $clear(this.timer); var slide = ($type(elements) == 'array') ? elements[pos] : this.elements[pos]; if(!slide) return false; var ext = this.getExt(slide); var category = (this.elements_type == 'hash') ? this.getCategory() + '/' : ''; var slideBig = $('MooSliderBig_' + pos); var self = this; // dbug.log(this.options.path + category + slide); if(!slideBig) { var w = new Waiter($('MooSliderBig')).start(); slideBig = new Asset.image(this.options.path + category + slide, { 'id' : 'MooSliderBig_' + pos, onload : function() { this.inject($('MooSliderBigWrapper')); this.setStyles({ 'position' : 'absolute', 'left' : (self.options.effect == 'slide') ? this.width * pos : 0, 'top' : 0 }); $('MooSliderBig').show(); self.positioning(this.height); // new Fx.Tween($('MooSliderBig')).start('height', this.height /*- $('MooSliderThumbs').getSize().y*/); w.stop(); if(pos == 0) self.preload(); if(self.options.effect == 'slide') { new Fx.Move($('MooSliderBigWrapper'), { relativeTo: $('MooSliderBig'), position: 'upperLeft', offset: {x: (this.width*pos != 0) ? -(this.width*pos) : 0}, transition: Fx.Transitions.Sine.easeInOut, duration: 1000 }).start(); } else { self.hideImages(pos); new Fx.Tween(this, { duration: 1000, onComplete : function(){ self.positioning(this.height); }.bind(this) }).start('opacity', 1); } if(self.elements_type == 'array') self.setCurrent(pos); self.autoplay(); } }); return; } if(this.options.effect == 'slide') { new Fx.Move($('MooSliderBigWrapper'), { relativeTo: $('MooSliderBig'), position: 'upperLeft', offset: {x: (slideBig.width*pos != 0) ? -(slideBig.width*pos) : 0}, transition: Fx.Transitions.Sine.easeInOut, duration: 1000 }).start(); } else { new Fx.Tween(slideBig, {duration: 1000}).start('opacity', 1); this.hideImages(pos); } if(this.elements_type == 'array') this.setCurrent(pos); this.autoplay(); }, positioning : function(height) { $('MooSliderThumbs').setStyle('position', 'absolute'); var chain = new Chain(); chain.chain( function(){ new Fx.Tween($('MooSliderBig'), { onComplete:function(){ chain.callChain() } }).start('height', height); }, function(){ new Fx.Tween($(this.options.container), { onComplete : function(){ chain.callChain() } }).start('height', $('MooSliderBig').getSize().y + $('MooSliderThumbs').getSize().y) }.bind(this), function(){ new Fx.Tween($('MooSliderThumbs'), { onComplete:function(){ chain.callChain() } }).start('top', height) } ); chain.callChain(); }, hideImages : function(pos) { $$('img[id^=MooSliderBig_]').each(function(el){ if(el.get('id') == 'MooSliderBig_' + pos) return; if(el.getStyle('opacity') == 0) return; new Fx.Tween(el, {duration: 1000}).start('opacity', 0); }); }, next : function() { var slider = $('MooSliderThumbs'); var wrapper = $('MooSliderWrapper'); var elsize = $('MooSliderThum0').getElement('img'); var wpos = wrapper.getPosition(slider); var lastX = -(wrapper.getSize().x - slider.getSize().x); var nextX = wpos.x - elsize.width; if(nextX < lastX) nextX = lastX; wrapper.tween('left', nextX); }, prev : function() { var slider = $('MooSliderThumbs'); var wrapper = $('MooSliderWrapper'); var elsize = $('MooSliderThum0').getElement('img'); var wpos = wrapper.getPosition(slider); var nextX = wpos.x + elsize.width; if(nextX > 0) nextX = 0; wrapper.tween('left', nextX); }, /** * this function set button on current */ setCurrent : function(pos) { $$('#MooSliderThumbs a.current').each(function(item){ // if(!item.hasClass('current')) return; item.removeClass('current'); item.getElement('img.over').fade('out'); item.getElement('img.out').fade('in'); }); if(this.elements_type == 'hash') { var p = this.getButtonPosition(pos); var pos = p.current; } if(!$('MooSliderThum' + pos)) return; var a = $('MooSliderThum' + pos).getElement('a'); if(!a) return; a.addClass('current'); a.getElement('img.over').fade('in'); a.getElement('img.out').fade('out'); // this.position = pos; // if(this.options.autoplay) // this.autoplay(); }, /** * get current category or slide position */ getCurrent : function() { if(this.elements_type == 'hash') { var ce = $$('#MooSliderThumbs a.current')[0]; if(!ce) return this.elements.getKeys()[0]; return ce.get('category'); } else { return this.getButtonPosition().current; } }, getButtonPosition : function(key) { var current = 0; var prev = 0; var next = 0; if($defined(key) && this.elements_type == 'hash') var ca = $('MooSliderThumbs').getElement('a[category='+key+']'); else var ca = $$('#MooSliderThumbs a.current')[0]; if(ca) { var tn = ca.getParent('div'); current = (tn.get('id').replace('MooSliderThum', '')).toInt(); } var slides = $$('#MooSliderThumbs div[id^=MooSliderThum]'); next = (current + 1 >= slides.length) ? 0 : current+1; prev = (current === 0) ? slides.length -1 : current-1; return {'prev':prev, 'current':current, 'next':next}; }, /** * get category name */ getCategory : function(key) { if(!$defined(key) || !this.elements.has(key)) key = this.getCurrent(); return key.replace('.' + this.getExt(key), ''); }, play : function() { var elements = (this.elements_type == 'hash') ? this.elements.get(this.getCurrent()) : this.elements; if(elements.length <= 1) return; var pos = (!$defined(this.position)) ? 0 : this.position; this.position = (pos + 1 >= elements.length) ? 0 : pos+1;; // dbug.log('PLAY - POS: %o, ELEMENTS: %o', pos, elements); this.show(this.position, elements); }, autoplay : function() { if($defined(this.timer)) this.timer = $clear(this.timer); if(!this.options.autoplay) return; this.timer = this.play.delay(this.options.duration, this); } }); // MooGallery var MooGallery = new Class({ initialize : function() { if(!$('gallery_view')) return; this.galleryViewer = $('gallery_view'); this.layout(); this.setLinks(); }, layout : function() { var container = $$('.gallery')[0]; if(!container) return; // Set height for gallery thumbs var thumbs = container.getElement('div.gallery_thumbs'); if(!thumbs) return; var thumbs_wrapper = thumbs.getElement('div.gallery_thumbs_wrapper'); if(!thumbs_wrapper) return; var tsize = thumbs.getSize(); var twsize = thumbs_wrapper.getComputedSize(); if(tsize.y > twsize.totalHeight) thumbs_wrapper.setStyle('height', tsize.y - twsize.computedTop - twsize.computedBottom - 10); var preview = container.getElement('div.gallery_preview'); if(!preview) return; var psize = preview.getSize(); var vsize = this.galleryViewer.getComputedSize(); if(psize.y > vsize.totalHeight) this.galleryViewer.setStyle('height', psize.y - vsize.computedTop - vsize.computedBottom - 10); }, setLinks : function() { $$('a[rel=MooGallery]').each(function(el, i) { if(i === 0) this.show(el.get('href')); el.addEvent('click', function() { this.show(el.get('href')); return false; }.bind(this)); }, this); }, show : function(img) { // current image var cimg = this.galleryViewer.getElement('img'); if(cimg) cimg.nix({duration:300}, true); var w = new Waiter(this.galleryViewer).start(); var image = new Asset.image(img, { onload : function() { image.fade('hide'); var vsize = this.galleryViewer.getSize(); if(image.width > vsize.x && image.width > image.height) { image.width = vsize.x - 10; image.removeProperty('height'); } else if(image.height > vsize.y && image.height > image.width) { image.height = vsize.y - 10; image.removeProperty('width'); } this.galleryViewer.adopt(image); image.setPosition({relativeTo:this.galleryViewer}); image.fade('in'); w.stop(); }.bind(this) }); } }); window.addEvent('domready', function() { /** * Prevent right click */ document.body.addEvent('contextmenu',function(e) { e.stop(); }); var kwicks = $$('a.kwick'); kwicks.each(function(kwick, i) { kwick.addEvents({ 'mouseenter' : function() { var rel = this.get('rel'); if(!rel || !$(rel)) { var element = this.getParent('li'); var fxm = new Fx.Tween(element); fxm.start('margin-top', -30); } }, 'mouseleave' : function() { var rel = this.get('rel'); if(!rel || !$(rel)) { var element = this.getParent('li'); var fxm = new Fx.Tween(element); fxm.start('margin-top', 0); } } }); }); // LANGUAGES $$('div.languages li a').each( function(lang ) { lang.addEvent('click', function() { var l = this.get('class'); var go = window.location.pathname; var lang_url = go.trim() + "?lang=" + l.trim(); this.set('href', lang_url); return true; }); }); // FIXME: the following does not work properly // var langFrm = $('formLang'); // if(langFrm) // { // $$('div.languages li a').each(function(lang){ // lang.addEvent('click', function(){ // var l = this.get('class'); // var go = location.href.split('/').getLast(); // langFrm.getElement('input[name=lang]').set('value', l.trim()); // langFrm.getElement('input[name=lang_go]').set('value', go.trim()); // langFrm.submit(); // return false; // }) // }); // } $$('.sub-nav').each(function(item){ // item.fade('hide'); item.set('y', item.getSize().y); item.setStyles({'height':0}); item.fade('hide'); }); $$('.sub-quicklink').each(function(item){ item.fade('hide'); item.set('y', item.getSize().y); }); // sub navigator remanufacturation var sn1a = $('subNavA0302'); var sn1e = $('subNav0302'); if(sn1e) { sn1e.setPosition( { relativeTo: sn1a, position: 'upperRight', offset : {x : 10, y : -8} }); sn1e.hide(); } new HoverGroup({ elements: [sn1a, sn1e], onEnter: function(){ sn1a.addClass('over'); sn1e.show(); }, onLeave: function(){ sn1a.removeClass('over'); sn1e.hide(); } }); // BANNERS var linkscontainer = $$('.mainheader')[0]; if(linkscontainer){ var grid_image = linkscontainer.getElement('img.background'); var grid_text = linkscontainer.getElement('.links-main li a'); if(grid_image && grid_text){ grid_image = grid_image.get('src'); grid_text = grid_text.get('html'); linkscontainer.empty(); var swf = (linkscontainer.getSize().y < 310) ? 'mainbanner2.swf' : 'mainbanner.swf'; var obj = new Swiff(swf, { id: 'MainBanner', width: 848, height: (linkscontainer.getSize().y < 310) ? 253 : 310, params: {wmode: 'transparent'}, vars: { gridImage: grid_image, gridText: grid_text } }).inject(linkscontainer); linkscontainer.setStyle('visibility', 'visible'); } } /* var linkscontainer = $$('.mainheader')[0]; var linkselement = $$('.mainheader .links')[0]; var linksshadow = $$('.linksshadow')[0]; if(!linksshadow || !linkscontainer || !linkselement) return; var img_bg = linkscontainer.getElement('img.background'); var img_grid = linkscontainer.getElement('img.grid'); img_bg.fade('hide'); if(img_grid) img_grid.fade('hide'); linkselement.fade('hide'); linksshadow.fade('hide'); */ // END BANNERS var wrapper_lists = $$('div.wrapper div.left li'); wrapper_lists.each(function(el) { var a = el.getElement('a'); if(!a) return false; var ahref = a.get('href'); var page = location.href.split('/').getLast(); page = page.split('?')[0]; if(page == ahref) el.addClass('here'); }); wrapper_lists.each(function(el) { var li = el.getElement('li.here'); var ul = el.getElement('ul'); if(ul && !li) { new Fx.Slide(ul).hide(); new HoverGroup({ elements: [el, ul], onEnter: function(){ el.addClass('over'); new Fx.Slide(ul, { onComplete : function(){ var slider = ul.getParent('div'); slider.store('height', slider.getSize().y); slider.setStyles({'overflow':'visible', 'height':'auto'}); } }).slideIn(); }, onLeave: function(){ el.removeClass('over'); var slider = ul.getParent('div'); slider.setStyles({'overflow':'hidden', 'height':slider.retrieve('height')}); new Fx.Slide(ul).slideOut(); } }); } }); // sub navigator Equipos en linea /* var sn2a = $('subNavA030201'); var sn2e = $('subNav030201'); if(sn2e){ sn2e.hide(); } new HoverGroup({ elements: [sn2a, sn2e], onEnter: function(){ sn2a.addClass('over'); sn2e.reveal(); }, onLeave: function(){ sn2a.removeClass('over'); sn2e.dissolve(); } }); */ }); window.addEvent('load', function(){ /** * Add Tips for all a with title property */ var atips = $$('a[title]'); atips.each(function(item){ item.store('tip:title', item.get('title').split('::')[0]); item.store('tip:text', item.get('title').split('::')[1]); item.set('title', null); }); new Tips(atips); $$('.sub-nav').each(function(element) { var rel = element.get('rel'); rel = rel.split(' '); var relative_element = $(document.body).getElement(rel[1]); var relative_y = 29 - relative_element.getSize().y; element.setPosition( { relativeTo: relative_element, position: 'bottomLeft', offset : {y : relative_y} }); //element.fade('in'); //console.log([rel[1], $(document.body).getElement(rel[1])]); /* element.addEvent('mouseleave', function(){ this.fade('out'); var e = relative_element.getParent('li'); var fxm = new Fx.Tween(e); fxm.start('margin-top', 0); }); */ new HoverGroup({ elements: [relative_element, element], onEnter: function(){ relative_element.addClass('over'); var e = relative_element.getParent('li'); var fxm = new Fx.Tween(e); fxm.start('margin-top', -60); // element.reveal({heightOverride : element.get('y')}); new Fx.Tween(element).start('height', element.get('y')); element.fade('in'); }, onLeave: function(){ relative_element.removeClass('over'); var e = relative_element.getParent('li'); var fxm = new Fx.Tween(e); fxm.start('margin-top', 0); // element.dissolve(); new Fx.Tween(element).start('height', 0); element.fade('out'); } }); }); $$('.sub-quicklink').each(function(element) { var rel = element.get('rel'); rel = rel.split(' '); var relative_element = $(document.body).getElement(rel[1]); var e = relative_element.getParent('li'); var relative_y = 29 - relative_element.getSize().y; element.setPosition( { relativeTo: e, position: 'leftTop', offset : {x : -6, y : 0} }); element.store('y', element.getSize().y); new Fx.Tween(element).start('height', 0); element.addEvent('mouseleave', function(){ new Fx.Tween(this, { onComplete:function(){ this.fade('hide'); }.bind(this) }).start('height', 0); // this.dissolve(); }); relative_element.addEvent('mouseenter', function(){ var e = this.get('rel'); if(!$(e)) return false; // ( function(){ $(e).reveal({heightOverride : $(e).get('y')}) } ).delay(300); ( function(){ $(e).fade('show'); new Fx.Tween($(e)).start('height', $(e).retrieve('y')); } ).delay(300); return false; }); }); // BANNERS /* var linkscontainer = $$('.mainheader')[0]; var linkselement = $$('.mainheader .links')[0]; var linksshadow = $$('.linksshadow')[0]; if(!linksshadow || !linkscontainer || !linkselement) return; var img_bg = linkscontainer.getElement('img.background'); var img_grid = linkscontainer.getElement('img.grid'); img_bg.fade('hide'); if(img_grid) img_grid.fade('hide'); linkselement.fade('hide'); linksshadow.fade('hide'); linkselement.setPosition({ relativeTo: linkscontainer, offset: {x:-100} }); linksshadow.setStyles({'height': linkselement.getSize().y + 20, 'width':(linkselement.getSize().x / 2) + 10}); linksshadow.setPosition({ relativeTo: linkselement, position : 'centerLeft', edge : 'centerLeft', offset : {x:-13} }); img_bg.setPosition({relativeTo:linkscontainer}); if(img_grid) img_grid.setPosition({relativeTo:linkscontainer}); var fxs = new Chain; fxs.chain( function(){ new Fx.Tween(img_bg, {onComplete:function(){ fxs.callChain() } }).start('opacity', 1) }, function(){ if(img_grid){ new Fx.Tween(img_grid, {onComplete:function(){ fxs.callChain() } }).start('opacity', 0.5); }else{ fxs.callChain() } }, function(){ new Fx.Tween(linksshadow, {onComplete:function(){ fxs.callChain() } }).start('opacity', 0.5) }, function(){ new Fx.Tween(linkselement, {onComplete:function(){ fxs.callChain() } }).start('opacity', 1) } ); (function(){ fxs.callChain() }).delay(500); */ // END BANNERS }); window.addEvent('resize', function(){ $$('.sub-nav').each(function(element) { var rel = element.get('rel'); rel = rel.split(' '); var relative_element = $(document.body).getElement(rel[1]); var relative_y = 29 - relative_element.getSize().y; element.setPosition( { relativeTo: relative_element, position: 'bottomLeft', offset : {y : relative_y} }); }); $$('.sub-quicklink').each(function(element) { var rel = element.get('rel'); rel = rel.split(' '); var relative_element = $(document.body).getElement(rel[1]); var e = relative_element.getParent('li'); var relative_y = 29 - relative_element.getSize().y; element.setPosition( { relativeTo: e, position: 'leftTop', offset : {x : -22, y : 0} }); }); });