//////////////////////////////////////////////////////////////////////////////////
// //
// DRESS&CO JS, copyright 2009 davidenke, awicon / zdmk - all rights reserved //
// //
//////////////////////////////////////////////////////////////////////////////////
// !DC_ImageLoader
var DC_ImageLoader = Class.create({
initialize: function(imgpath, callback) {
this.imgpath = imgpath;
this.callback = callback || 0;
},
load: function() {
this.tmpImg = new Image();
this.tmpImg.src = this.imgpath;
this.tmpImg.onload = this.callback;
}
});
// !DC_Menu
var DC_Menu = Class.create({
initialize: function() {
this.elements = new Object();
this.elements.selected = false;
this.elements.menu = $('navigation-menu') || 0;
this.elements.menu.parent = this;
this.elements.logo = $('logo').hide();
this.elements.items = this.elements.menu.select('a');
this.elements.items.each((function(item) {
item.parent = this;
item.labels = item.select('canvas');
}).bind(this));
},
menufade: function(t) {
var target = t || 1;
if (this.animation)
this.animation.cancel();
new Effect.Opacity(this.elements.menu, {
to: target,
queue: { scope: 'menu', position: 'end' },
duration: Options.animation.duration
});
},
menuleft: function(l) {
var target = l || 200;
if (this.animation)
this.animation.cancel();
new Effect.Morph(this.elements.menu, {
style: { left: target + 'px' },
queue: { scope: 'menu', position: 'end' },
duration: Options.animation.duration
});
},
menushrink: function() {
var r = false;
if (r) {
} else {
/*this.elements.items.invoke('absolutize');
this.elements.menu.observe('mouseover', (function() {
this.elements.items.invoke('relativize');
this.elements.menu.setStyle({
width: '348px',
height: '234px'
});
}).bind(this));
this.elements.menu.observe('mouseout', (function() {
this.elements.items.invoke('setStyle', {
position: 'absolute',
top: '78px'
});
this.elements.menu.setStyle({
width: '90px',
height: '90px'
});
}).bind(this));*/
r = true;
}
},
menuscale: function(s) {
var target = s || 100;
if (this.animation)
this.animation.cancel();
if (target != 100) {
this.elements.menu.select('span').invoke('hide');
new Effect.Morph(this.elements.menu, {
duration: Options.animation.duration,
style: {
width: this.elements.menu.getWidth() * s * 1.01 / 100 + 'px',
paddingTop: '10px',
left: '770px'
},
afterFinish: (function() {
this.elements.menu.setStyle({ height: 'auto' });
}).bind(this)
});
new Effect.multiple(this.elements.items, Effect.Morph, {
style: {
width: 75 * s / 100 + 'px',
height: 75 * s / 100 + 'px',
margin: 6 * s / 100 + 'px',
backgroundColor: '#fff'
},
duration: Options.animation.duration,
speed: 0
});
} else {
new Effect.Morph(this.elements.menu, {
duration: Options.animation.duration,
style: {
width: '348px',
height: '234px',
paddingTop: '66px',
left: '200px'
},
afterFinish: (function() {
this.elements.menu.select('canvas').invoke('show');
}).bind(this)
});
new Effect.multiple(this.elements.items, Effect.Morph, {
style: {
width: '75px',
height: '75px',
margin: '6px',
backgroundColor: 'inherit'
},
duration: Options.animation.duration,
speed: 0
});
}
}
});
// !DC_Resizer
var DC_Resizer = Class.create({
initialize: function(idoe) {
this.element = $(idoe);
// resizing stage image
Event.observe(window, 'resize', (function() {
this.resize();
}).bind(this));
this.resize();
},
resize: function() {
var vs = document.viewport.getDimensions();
var vm = vs.width / vs.height;
var is = this.element.getDimensions();
var im = is.width / is.height;
if (vm > im)
this.element.setStyle({ width: '100%', height: 'auto' });
if (vm < im)
this.element.setStyle({ width: 'auto', height: '100%' });
}
});
// !DC_Overlay
var DC_Overlay = Class.create({
initialize: function(src) {
if ($('overlay-container'))
$('overlay-container').remove();
if ($('overlay-background'))
$('overlay-background').remove();
this.elements = new Object();
this.build();
this.cache = new Image();
this.cache.onload = this.show.bind(this);
this.cache.src = src;
},
show: function() {
new Effect.Parallel([
new Effect.Morph(this.elements.top, {
sync: true,
style: 'width: ' + this.cache.width + 'px;'
}),
new Effect.Morph(this.elements.menu, {
sync: true,
style: 'width: ' + this.cache.width + 'px;'
})
], {
duration: Options.animation.duration * 2,
afterFinish: (function() {
new Effect.Morph(this.elements.top, {
duration: Options.animation.duration * 2,
style: 'height: ' + this.cache.height + 'px',
afterFinish: (function() {
this.elements.top.update('
');
this.elements.img = $('overlay-image');
new Effect.Appear(this.elements.img, { duration: Options.animation.duration * 2 });
}).bind(this)
});
}).bind(this)
});
},
build: function() {
$$('body').first().insert({
bottom: '
'
});
var pageSize = this.getPageSize();
this.elements.top = $('overlay-top');
this.elements.menu = $('overlay-menu');
this.elements.container = $('overlay-container');
this.elements.print = $('overlay-print').observe('click', this.print.bind(this));
this.elements.close = $('overlay-close').observe('click', this.close.bind(this));
this.elements.background = $('overlay-background').observe('click', this.close.bind(this)).setStyle({
width: pageSize[0] + 'px',
height: pageSize[1] + 'px'
});
},
close: function() {
new Effect.Parallel([
new Effect.Fade(this.elements.container, { sync: true }),
new Effect.Fade(this.elements.background, { sync: true })
], {
duration: Options.animation.duration
});
},
print: function() {
window.print();
},
/* getPageSize from lightbox.js */
getPageSize: function() {
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = window.innerWidth + window.scrollMaxX;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
if(document.documentElement.clientWidth){
windowWidth = document.documentElement.clientWidth;
} else {
windowWidth = self.innerWidth;
}
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
// for small pages with total width less then width of the viewport
if(xScroll < windowWidth){
pageWidth = xScroll;
} else {
pageWidth = windowWidth;
}
return [pageWidth,pageHeight];
}
});
// !DC_Slides
var DC_Slides = Class.create({
initialize: function(args) {
this.imageObject = new DC_ImageLoader(args.img);
//this.menuObject = new DC_Menu();
this.elements = new Object();
this.elements.logo = $('logo');
this.elements.stage = $('stage').setOpacity(0);
// LOADER
this.imageObject.callback = (function() {
/*var img = new Element('img', {
src: this.imageObject.imgpath, alt: ''
});*/
if (this.animation) {
this.animation.cancel();
this.elements.stage.setOpacity(0);
}
this.elements.stage.update('
');
this.animation = new Effect.Parallel([
//new Effect.Fade(this.elements.logo, { sync: true }),
new Effect.Opacity(this.elements.stage, 100, { sync: true })
], {
duration: Options.animation.duration * 3,
queue: { scope: 'headerscope', position: 'end' }
});
this.elements.stage.select('img').first().width = this.elements.stage.getWidth();
}).bind(this);
this.imageObject.load();
}
});
// !DC_Gallery
var DC_Gallery = Class.create({
initialize: function(args) {
this.menuObject = new DC_Menu();
this.menuObject.menuleft(new Number(-6));
//this.menuObject.menufade(.5);
//this.menuObject.menuscale(25);
//this.menuObject.menushrink();
this.elements = new Object();
this.elements.logo = $('logo');
this.elements.stage = $('stage').setOpacity(1);
this.elements.galls = $$('ul.right li a');
this.elements.galls.each((function(gall, index) {
gall.observe('click', (function() {
if (!gall.hasClassName('active')) {
this.elements.galls.invoke('removeClassName', 'active');
gall.addClassName('active');
this.load(Galleries[gall.rel]);
}
}).bind(this));
}).bind(this)).first().addClassName('active');
this.elements.stage.update('');
this.elements.container = $('galcontainer');
this.elements.container.scrollLeft = 0;
this.load(Galleries[this.elements.galls.first().rel]);
},
load: function(gall) {
var complete = false;
var imageElements = new Array();
var imageObjects = new Array();
this.elements.container.update('');
gall.imgs.each((function(img, index) {
if (index == gall.imgs.length - 1) cls = 'class="last"';
else if (index == 0) cls = 'class="first"';
else cls = '';
this.elements.container.insert({
bottom: '
'
});
imageObjects.push(new DC_ImageLoader(Galleries.path + '/' + gall.folder + '/' + img));
var io = imageObjects.last();
io.callback = (function() {
imageElements[index] = $(gall.folder + '_' + index);
imageElements[index].index = index;
imageElements[index].observe('click', (function() {
this.focus(imageElements[index]);
}).bind(this));
new Effect.Appear(imageElements[index], {
duration: Options.animation.duration * 2,
afterFinish: (function() {
if (index == 0)
this.focus(imageElements[0]);
//if (index == Math.floor(imageElements.length / 2))
//this.focus(imageElements[Math.floor(imageElements.length / 2)]);
}).bind(this)
});
}).bind(this)
io.load();
}).bind(this));
},
focus: function(el) {
if (this.elements.focused != el) {
var v = (this.elements.focused && this.elements.focused.index < el.index) ? Math.round(this.elements.focused.getWidth() / 2.174) : 0;
new Effect.Parallel([
new Effect.Tween(
this.elements.container,
this.elements.container.scrollLeft,
//Math.abs((this.elements.stage.getWidth() - el.offsetLeft - el.getWidth() * 1.81) / 2),
//Math.abs((el.offsetLeft - v + el.getWidth() * .90361) - this.elements.stage.getWidth() * .5),
//Math.abs((el.offsetLeft - v + el.getWidth()) - this.elements.stage.getWidth() * .5),
Math.abs(el.offsetLeft - $('container').offsetLeft - 256 - v),
{ sync: true },
'scrollLeft'
),
new Effect.Morph(el, {
sync: true,
style: {
marginTop: '0px',
marginBottom: '0px',
height: '300px'
}
})
], {
duration: Options.animation.duration * 2
});
if (this.elements.focused)
new Effect.Morph(this.elements.focused, {
duration: Options.animation.duration * 2,
style: {
marginTop: '69px',
marginBottom: '69px',
height: '162px'
}
});
this.elements.focused = el;
}
}
});
// !DC_Brands
var DC_Brands = Class.create({
initialize: function(args) {
this.sliderObject = new DC_Slides(args);
this.menuObject = new DC_Menu();
this.animations = new Object();
this.elements = new Object();
/* BRANDS */
this.logos = Brands;
this.types = Types;
this.elements.brands = $$('#content .container-brand');
this.elements.brands.each((function(brand, index) {
brand.removeClassName('noscript');
brand.parent = this;
brand.logo_bg = brand.down(0).removeClassName('opaque50').setOpacity(.5);
brand.logo_rgb = brand.down(1).setOpacity(0);
brand.logo_sw = brand.down(2).removeClassName('opaque50').setOpacity(.5);
brand.logo_handle = brand.down(3);
brand.logo_handle.parent = brand;
brand.logo_name = $w(brand.logo_sw.className).first();
brand.visible = true;
brand.logo_handle.mouseover = function() {
new Effect.Parallel([
new Effect.Opacity(this.parent.logo_rgb, { to: 1, sync: true }),
new Effect.Opacity(this.parent.logo_sw, { to: 0, sync: true }),
new Effect.Opacity(this.parent.logo_bg, { to: 1, sync: true })
], { duration: Options.animation.duration, queue: { scope: 'sc_' + this.parent.logo_name, position: 'end' } });
}
brand.logo_handle.mouseout = function() {
new Effect.Parallel([
new Effect.Opacity(this.parent.logo_rgb, { to: 0, sync: true }),
new Effect.Opacity(this.parent.logo_sw, { to: .5, sync: true }),
new Effect.Opacity(this.parent.logo_bg, { to: .5, sync: true })
], { duration: Options.animation.duration, queue: { scope: 'sc_' + this.parent.logo_name, position: 'end' } });
}
if (this.logos[brand.logo_name].enabled == '1') {
brand.logo_handle.observe('mouseover', brand.logo_handle.mouseover);
brand.logo_handle.observe('mouseout', brand.logo_handle.mouseout);
brand.logo_handle.observe('click', (function() {
if (brand.parent.elements.active != brand.logo_handle) {
if (brand.parent.elements.active) {
brand.parent.elements.active.mouseout();
brand.parent.elements.active.observe('mouseover', brand.parent.elements.active.mouseover);
brand.parent.elements.active.observe('mouseout', brand.parent.elements.active.mouseout);
}
brand.logo_handle.stopObserving('mouseover');
brand.logo_handle.stopObserving('mouseout');
brand.parent.elements.active = brand.logo_handle;
$$('.index p')[0].update(this.logos[brand.logo_name].name);
$$('.index p .icon').invoke('hide');
this.logos[brand.logo_name].types.each((function(type) {
$('icon-' + this.types[type]).show();
}).bind(this));
this.sliderObject = new DC_Slides({ img: this.logos[brand.logo_name].img });
}
}).bind(this));
} else brand.setStyle({ cursor: 'default' });
//this.logos[index] = brand;
//brand.img = this.logos[brand];
}).bind(this));
}
});
// !DC_Panorama
var DC_Panorama = Class.create({
initialize: function(args) {
this.imageObject = new DC_ImageLoader(args.img);
this.menuObject = new DC_Menu();
this.animations = new Object();
this.elements = new Object();
this.elements.menu = $('navigation-menu');
this.elements.stage = $('stage').setOpacity(0);
this.elements.left = $('arrow-left').setOpacity(1).removeClassName('hidden');
this.elements.right = $('arrow-right').setOpacity(1).removeClassName('hidden');
// LOADER
this.imageObject.callback = (function() {
this.elements.stage.setStyle({ background: 'url(' + this.imageObject.imgpath + ') repeat-x', backgroundPosition: Store.offset + 'px 0px' });
this.elements.stage.bwidth = this.elements.stage.getWidth() / 2;
this.elements.stage.imgwidth = this.imageObject.tmpImg.width;
this.elements.stage.offset = Store.offset;
this.elements.stage.index = Store.area;
new Effect.Opacity(this.elements.stage, {
from: 0,
to: 1,
duration: Options.animation.duration * 3,
afterFinish: (function() {
/*this.animations.arrows = new Effect.Parallel([
new Effect.Opacity(this.elements.left, { sync: true, from: 1, to: 0 }),
new Effect.Opacity(this.elements.right, { sync: true, from: 1, to: 0 })
], { duration: Options.animation.duration * 4 });*/
}).bind(this)
});
}).bind(this);
this.imageObject.load();
/* PANORAMA */
this.elements.stage.observe('mouseover', this.moveBy.bind(this));
this.elements.stage.observe('mouseout', this.moveOut.bind(this));
},
focusLogos: function(is) {
this.logos.invoke('hide');
for (i in is) {
if (typeof is[i] == "number")
new Effect.Appear(this.logos[is[i]], { duration: Options.animation.duration }); //this.logos[is[i]].show();
}
},
findArea: function() {
var b = this.elements.stage.bwidth;
var l = this.elements.stage.offset;
var k = this.elements.stage.imgwidth;
// MULTIPLIKATOR
var m = Math.round(l / k);
if (!isFinite(m)) m = 0;
// BILDBREITE * MULTIPLIKATOR
var n = k * m;
// POSITION -> SCROLLBAR PROBLEM, DAHER OVERFLOW-Y = SCROLL
var o = b - l + n;
// NAHELIEGENDEN Xmin Eintrag suchen
/*var index = -1;
for (var i = 0; i < Store.areas.length; i++) {
var next = (i == (Store.areas.length - 1)) ? 0 : i + 1;
if (next != 0 && Store.areas[i][0] < o && o < Store.areas[next][0]) {
index = i;
} else if (next == 0 && index == -1) {
index = Store.areas.length - 1;
}
}
if (index != this.elements.stage.index) {
// LOGOS EINBLENDEN
this.focusLogos(Store.areas[index][1]);
this.elements.stage.index = index;
}*/
},
moveBy: function(ev) {
if (!Event.element(ev).descendantOf(this.elements.stage)) {
if (this.animations.arrows)
this.animations.arrows.effects.invoke('cancel');
window.clearInterval(this.animations.moveOut);
this.elements.stage.stopObserving('mouseover');
this.elements.stage.observe('mouseout', this.moveOut.bind(this));
this.menuObject.menufade(.25);
this.mouse = new Mouse(ev);
this.animations.moveBy = window.setInterval((function(ev) {
this.elements.stage.bwidth = this.elements.stage.getWidth() / 2;
this.elements.stage.faktor = ((this.elements.stage.bwidth - this.mouse._x) * Options.animation.speed) / this.elements.stage.bwidth;
this.elements.stage.offset += this.elements.stage.faktor;
this.elements.stage.setStyle({ backgroundPosition: this.elements.stage.offset + 'px 0px' });
// Show Arrows - Opacity by Speed
var percent = ((this.elements.stage.faktor / Options.animation.speed) * 100);
this.elements.left.setOpacity(percent * .01);
this.elements.right.setOpacity(percent * -.01);
// Logos einblenden
this.findArea();
}).bind(this), 1000 / Options.animation.fps);
}
},
moveOut: function(ev) {
if (!Event.element(ev).descendantOf(this.elements.stage)) {
window.clearInterval(this.animations.moveBy);
this.mouse.body.stopObserving('mousemove');
this.elements.stage.stopObserving('mouseout');
this.elements.stage.observe('mouseover', this.moveBy.bind(this));
this.menuObject.menufade(1);
var el = (this.mouse._x < (this.elements.stage.getWidth() / 2)) ? this.elements.left : this.elements.right;
/*if (el.visible) {*/
new Effect.Opacity(el, { duration: Options.animation.duration, to: 0 });
/* el.visible = false;
}*/
this.animations.moveOut = window.setInterval((function() {
if (this.elements.stage.faktor > 1) {
this.elements.stage.faktor -= (100 - Options.animation.inertia) / 100;
this.elements.stage.offset += this.elements.stage.faktor;
this.elements.stage.setStyle({ backgroundPosition: this.elements.stage.offset + 'px 0px' });
} else if (this.elements.stage.faktor < -1) {
this.elements.stage.faktor += (100 - Options.animation.inertia) / 100;
this.elements.stage.offset += this.elements.stage.faktor;
this.elements.stage.setStyle({ backgroundPosition: this.elements.stage.offset + 'px 0px' });
} else {
this.elements.stage.faktor = 0;
this.elements.stage.offset = Math.round(this.elements.stage.offset);
this.elements.stage.setStyle({ backgroundPosition: this.elements.stage.offset + 'px 0px' });
window.clearInterval(this.animations.moveOut);
}
// Logos einblenden
this.findArea();
//this.elements.stage.innerHTML = this.mouse._x + "
" + this.elements.stage.faktor + "
" + this.elements.stage.offset;
}).bind(this), 1000 / Options.animation.fps);
}
}
});
// !DC_Register
var DC_Register = Class.create({
initialize: function(mail) {
if (/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(mail.value)) {
new Ajax.Request('/register.php', {
method: 'post',
parameters: 'mail=' + mail.value,
onSuccess: (function(transport) {
if (transport.responseText == 'true') {
$('register-error').update(labels.de.submit);
mail.value = '';
} else if (transport.responseText == 'double')
$('register-error').update(labels.de.double);
else
$('register-error').update(labels.de.failure);
}).bind(this)
});
} else {
$('register-error').update("'" + mail.value + "' " + labels.de.error);
}
}
});