ARCHIKON contructeurs « »
ARCHIKON contructeurs
Visit archikonconstructeurs.nl
-
Meta
Added 4 months ago -
Categories
-
Links of interest
- Original Source
- At Twitter: @archikon_goes
- Form jQuery Plugin
- Validation jQuery Plugin
- prettyPhoto jQuery Plugin
- scrollTo jQuery Plugin
- LocalScroll jQuery Plugin
- SVG jQuery Plugin
- Drawing Library jQuery Plugin
- jQuery Tools
- Preloader jQuery Plugin
- Fullscreenr jQuery Plugin
- Cycle jQuery Plugin
- doTimeout jQuery Plugin
- Backstretch jQuery Plugin
var Archikon = Class.create({
// options
options: {
backend: false,
lineWidth: 1
},
current_page: '',
current_sub_page: '',
current_project: '',
bgImages: [
//'images/backgrounds/bureau-kwaliteit.jpg',
//'images/backgrounds/bureau-team.jpg',
'images/backgrounds/bureau-home.jpg', 'images/backgrounds/image-roosters.jpg'
//'images/backgrounds/bureau-visie.jpg',
//'images/backgrounds/project-bg.jpg',
//'images/backgrounds/contact.jpg'
],
bgs: [],
prettyPhotoOptions: {
show_title: true,
social_tools: false,
deeplinking: false,
theme: 'light_square',
gallery_markup: '',
modal: false
},
initialize: function(options) {
// setup options
this.options = options;
if ($.browser.msie) {
if (parseInt($.browser.version, 10) < 7) {
return false;
}
}
if (this.options.bgs.length > 0) {
this.bgs = $.parseJSON(this.options.bgs);
}
this.current_page = '#page_5';
this.current_sub_page = '#page8_id_2';
this.current_project = '#page2_id_1';
this.initScreen();
this.preloadImages($.proxy(function() {
this.initMenu();
this.scrollPageEvents();
this.initHomeButton();
this.drawLines();
}, this));
// Window resize (IE and Safari fire this event continually)
$(window).resize($.proxy(function() {
$.doTimeout('resize', 250, $.proxy(function() {
this.initScreen();
this.drawLines();
$.scrollTo(this.current_page, 1000);
}, this));
}, this));
},
preloadImages: function(callback) {
if ($.browser.msie) {
$.scrollTo('#page_5', 1000, {
onAfter: $.proxy(function() {
$('.logo, .social').fadeIn(500);
this.changeBackground('', 'homepage', callback);
}, this)
});
} else {
$.preLoadImages('images/loader.gif', $.proxy(function() {
$('<img />').attr({
src: 'images/loader.gif',
alt: 'Loading..',
title: 'Loading..'
}).attr('class', 'left').appendTo('#loading');
//$.ajax({
// url: 'projecten/all-images',
// type: "GET",
// success: $.proxy(function(data){
// oData = jQuery.parseJSON(data);
// $.preLoadImages(oData, $.proxy(function(){
$.preLoadImages(this.bgImages, $.proxy(function() {
$.preLoadCSSImages($.proxy(function() {
$.scrollTo(this.current_page, 1000, {
onAfter: $.proxy(function() {
$('.logo, .social').fadeIn(500);
this.changeBackground('', 'homepage', callback);
}, this)
});
}, this))
}, this));
//}, this));
//}, this)
//});
}, this));
}
},
initScreen: function() {
var width = $(window).width();
$('body').css('width', width);
$('#container').css('width', width * 3);
$('#archikon').css('width', width * 3);
$('#archikon_canvas').css('width', width * 3);
$('#archikon div').css('width', width * 3);
$('.page').css('width', width);
$('.background').css('width', width);
$('.background2').css('width', width);
var height = $(window).height();
$('body').css('height', height);
$('#container').css('height', height * 3);
$('#archikon').css('height', height * 3);
$('#archikon_canvas').css('height', height * 3);
$('#archikon div').css('height', height * 3);
$('.page').css('height', height);
if ($('head link:last').attr('id') != 'cssContent') {
$("head").append("<link>");
}
var oDate = new Date();
css = $("head").children(":last");
if (height > 700) {
css.attr({
rel: "stylesheet",
type: "text/css",
href: "css/big.css?cb=" + oDate.getTime(),
id: "cssContent"
});
} else {
css.attr({
rel: "stylesheet",
type: "text/css",
href: "css/small.css?cb=" + oDate.getTime(),
id: "cssContent"
});
}
this.positionMenuItems();
},
initMenu: function() {
$('div.menu a').click(function() {
if (!$(this).parent().hasClass('active')) {
$('div.menu a').each(function() {
$(this).parent().removeClass('activestate')
});
$(this).parent().addClass('activestate')
}
});
},
scrollPageEvents: function() {
// scroll naar projecten
this.scrollPageEvent($('#page_5_id_5'), '#page_2', '', $.proxy(function() {
this.initProjects();
this.initProject("projecten/woningbouw");
}, this), '');
// scroll naar contact
this.scrollPageEvent($('#page_5_id_2'), '#page_6', '', $.proxy(function() {
this.initForms();
$(document).unbind('keypress');
}, this), 'contact');
// scroll naar bureau
this.scrollPageEvent($('#page_5_id_1'), '#page_8', '', $.proxy(function() {
this.initBureau();
this.setBureau("content/visie");
}, this), 'visie');
},
scrollPageEvent: function(elmButton, elmTo, bgImage, callback, category) {
elmButton.bind('click', $.proxy(function() {
this.current_page = elmTo;
$('a#home').fadeIn(1000);
this.changeBackground(bgImage, category, callback);
if (typeof callback == 'function') {
callback();
}
$.scrollTo(elmTo, 1000);
switch (elmTo) {
case '#page_2':
$(this.current_project).addClass('activestate');
break;
case '#page_6':
$('#page6_id_1').addClass('activestate');
break;
case '#page_8':
$(this.current_sub_page).addClass('activestate');
break;
}
}, this));
},
drawLinesInMenuIE: function(menuItems) {
$(menuItems).each(
function() {
var srcHeight = 0;
var trgHeight = 0;
var srcWidth = 0;
var trgWidth = 0;
var menuDiv = $(this).parent();
if ($(this).attr("rel")) {
var srcOffset = $(this).offset();
if (menuDiv.hasClass('rb') || menuDiv.hasClass('lb')) {
srcHeight = menuDiv.height();
}
if (menuDiv.hasClass('rb') || menuDiv.hasClass('rt')) {
srcWidth = menuDiv.width();
}
var targetDiv = $("#" + $(this).attr("rel")).parent();
if (targetDiv.length) {
var trgOffset = targetDiv.offset();
if (targetDiv.hasClass('rb') || targetDiv.hasClass('lb')) {
trgHeight = targetDiv.height();
}
if (targetDiv.hasClass('rb') || targetDiv.hasClass('rt')) {
trgWidth = targetDiv.width();
}
$("#archikon_canvas").drawLine(srcOffset.left + srcWidth, srcOffset.top + srcHeight, trgOffset.left + trgWidth, trgOffset.top + trgHeight, {
color: '#fff'
});
}
}
});
},
drawLineIE: function(srcElement, trgElement) {
var srcHeight = 0;
var srcWidth = 0;
var trgHeight = 0;
var trgWidth = 0;
var srcOffset = srcElement.offset();
if (srcElement.hasClass('rb') || srcElement.hasClass('lb')) {
srcHeight = srcElement.height();
}
if (srcElement.hasClass('rb') || srcElement.hasClass('rt')) {
srcWidth = srcElement.width();
}
var trgOffset = trgElement.offset();
if (trgElement.hasClass('rb') || trgElement.hasClass('lb')) {
trgHeight = trgElement.height();
}
if (trgElement.hasClass('rb') || trgElement.hasClass('rt')) {
trgWidth = trgElement.width();
}
$("#archikon_canvas").drawLine(srcOffset.left + srcWidth, srcOffset.top + srcHeight, trgOffset.left + trgWidth, trgOffset.top + trgHeight, {
color: '#fff'
});
},
drawLines: function() {
$('#archikon_canvas').empty();
var height = $(window).height();
var width = $(window).width();
if ($.browser.msie) {
if (parseInt($.browser.version, 10) < 9) {
this.drawLinesInMenuIE($(".menu a"));
// this lines are allways visible
this.drawLineIE($('#page5_id_5'), $('#page_2_id_2'));
this.drawLineIE($('#page8_id_1'), $('#page5_id_1'));
this.drawLineIE($('#page8_id_3'), $('#page8_id_2'));
this.drawLineIE($('#page_6 .content h1'), $('#page6_id_1'));
// this lines are drawn dynamicly based on the current page / project
this.drawLineIE($('#project_title_1'), $(this.current_project));
this.drawLineIE($('#page_8 .content h1'), $(this.current_sub_page));
}
} else {
var canvasJq = $("#archikon");
var cOffset = canvasJq.offset();
var canvasEl = canvasJq[0];
//var canvasEl = document.getElementById("archikon");
if (typeof(G_vmlCanvasManager) != 'undefined') {
canvasEl = G_vmlCanvasManager.initElement(canvasEl);
}
canvasEl.width = canvasJq.width();
canvasEl.height = canvasJq.height();
if (canvasEl.getContext) {
//alert('yes');
var ctx = canvasEl.getContext('2d');
ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
//ctx.fillStyle = "rgba(0, 0, 255, .5)";
//ctx.fillRect(0, 0, canvasEl.width, canvasEl.height);
ctx.beginPath();
ctx.moveTo(100, 150);
ctx.lineTo(300, 350);
this.drawLinesInMenu(ctx, $(".menu a"), cOffset);
// this lines are allways visible
this.drawLine(ctx, $('#page5_id_5'), $('#page_2_id_2'), cOffset);
this.drawLine(ctx, $('#page8_id_1'), $('#page5_id_1'), cOffset);
this.drawLine(ctx, $('#page8_id_3'), $('#page8_id_2'), cOffset);
this.drawLine(ctx, $('#page_6 .content h1'), $('#page6_id_1'), cOffset);
// this lines are drawn dynamicly based on the current page / project
this.drawLine(ctx, $('#project_title_1'), $(this.current_project), cOffset);
this.drawLine(ctx, $('#page_8 .content h1'), $(this.current_sub_page), cOffset);
ctx.strokeStyle = '#fff';
ctx.lineWidth = 1;
ctx.stroke();
ctx.closePath();
$.scrollTo(this.current_page, 1000, {
onAfter: function() {
//$('.background, .logo, .social').fadeIn(800)
$('.logo, .social').fadeIn(800)
}
});
} else {
//alert('no canvas');
}
}
},
drawLinesInMenu: function(ctx, menuItems, cOffset) {
$(menuItems).each(
function() {
var srcHeight = 0;
var trgHeight = 0;
var srcWidth = 0;
var trgWidth = 0;
var menuDiv = $(this).parent();
if ($(this).attr("rel")) {
var srcOffset = $(this).offset();
if (menuDiv.hasClass('rb') || menuDiv.hasClass('lb')) {
srcHeight = menuDiv.height();
}
if (menuDiv.hasClass('rb') || menuDiv.hasClass('rt')) {
srcWidth = menuDiv.width();
}
var targetDiv = $("#" + $(this).attr("rel")).parent();
if (targetDiv.length) {
var trgOffset = targetDiv.offset();
if (targetDiv.hasClass('rb') || targetDiv.hasClass('lb')) {
trgHeight = targetDiv.height();
}
if (targetDiv.hasClass('rb') || targetDiv.hasClass('rt')) {
trgWidth = targetDiv.width();
}
ctx.moveTo(srcOffset.left - cOffset.left + srcWidth, srcOffset.top - cOffset.top + srcHeight);
ctx.lineTo(trgOffset.left - cOffset.left + trgWidth, trgOffset.top - cOffset.top + trgHeight);
}
}
});
},
drawLine: function(ctx, srcElement, trgElement, cOffset) {
var srcHeight = 0;
var srcWidth = 0;
var trgHeight = 0;
var trgWidth = 0;
var srcOffset = srcElement.offset();
if (srcElement.hasClass('rb') || srcElement.hasClass('lb')) {
srcHeight = srcElement.height();
}
if (srcElement.hasClass('rb') || srcElement.hasClass('rt')) {
srcWidth = srcElement.width();
}
var trgOffset = trgElement.offset();
if (trgElement.hasClass('rb') || trgElement.hasClass('lb')) {
trgHeight = trgElement.height();
}
if (trgElement.hasClass('rb') || trgElement.hasClass('rt')) {
trgWidth = trgElement.width();
}
ctx.moveTo(srcOffset.left - cOffset.left + srcWidth, srcOffset.top - cOffset.top + srcHeight);
ctx.lineTo(trgOffset.left - cOffset.left + trgWidth, trgOffset.top - cOffset.top + trgHeight);
},
changeBackground: function(bgImage, category, callback) {
if (typeof category == 'string' && category != '') {
bgImage = this.bgs[category][Math.floor(Math.random() * this.bgs[category].length)];
} else if ((typeof bgImage == 'undefined') || bgImage == '') {
bgImage = this.bgImages[Math.floor(Math.random() * this.bgImages.length)];
}
$.backstretch(bgImage, {
speed: 500
});
if (typeof callback == 'function') {
callback();
}
},
initHomeButton: function() {
$('a#home, div.logo').bind('click', $.proxy(function() {
$(document).unbind('keypress');
this.current_page = '#page_5';
this.changeBackground('', 'homepage');
$('a#home').fadeOut(800);
$.scrollTo('#page_5', 1000);
}, this));
},
initForms: function() {
$('div.form.generator form').each(function() {
var oForm = new FormHandler({
form: this,
ajax: true
});
});
},
setCurrentProject: function(current_project) {
this.current_project = current_project;
},
initProjects: function() {
$('#page_2_id_1').bind('click', $.proxy(function(evt) {
evt.preventDefault();
evt.stopPropagation();
this.initProject($(evt.target).attr('href'));
this.setCurrentProject('#' + $(evt.target).parent().attr('id'));
this.drawLines();
}, this));
$('#page_2_id_3').bind('click', $.proxy(function(evt) {
evt.preventDefault();
evt.stopPropagation();
this.initProject($(evt.target).attr('href'));
this.setCurrentProject('#' + $(evt.target).parent().attr('id'));
this.drawLines();
}, this));
$('#page_2_id_4').bind('click', $.proxy(function(evt) {
evt.preventDefault();
evt.stopPropagation();
this.initProject($(evt.target).attr('href'));
this.setCurrentProject('#' + $(evt.target).parent().attr('id'));
this.drawLines();
}, this));
$('#page_2_id_5').bind('click', $.proxy(function(evt) {
evt.preventDefault();
evt.stopPropagation();
this.initProject($(evt.target).attr('href'));
this.setCurrentProject('#' + $(evt.target).parent().attr('id'));
this.drawLines();
}, this));
$('#page_2_id_6').bind('click', $.proxy(function(evt) {
evt.preventDefault();
evt.stopPropagation();
this.initProject($(evt.target).attr('href'));
this.setCurrentProject('#' + $(evt.target).parent().attr('id'));
this.drawLines();
}, this));
$('#page_2_id_7').bind('click', $.proxy(function(evt) {
evt.preventDefault();
evt.stopPropagation();
this.initProject($(evt.target).attr('href'));
this.setCurrentProject('#' + $(evt.target).parent().attr('id'));
this.drawLines();
}, this));
},
initProject: function(uri) {
$.ajax({
url: uri,
type: "GET",
success: $.proxy(function(data) {
oData = jQuery.parseJSON(data);
$('#page_2 .content').html(oData.projecten);
$('.projects').cycle({
requeueTimeout: 500,
timeout: 0,
speed: 800,
cleartype: 1,
fx: 'scrollBothWays',
next: '#nextproject',
prev: '#previousproject',
onPrevNextEvent: $.proxy(function(isNext, zeroBasedSlideIndex, slideElement) {
var project_id = $(slideElement).attr('class').replace('project project_', '');
var uri = 'projecten/afbeeldingen/project_id/' + project_id;
$.ajax({
url: uri,
type: "GET",
success: $.proxy(function(data) {
oData = jQuery.parseJSON(data);
if (typeof oData.html != 'undefined') {
$('div.project_samples').html(oData.html);
$("a[rel^='prettyPhoto']").prettyPhoto(this.prettyPhotoOptions);
this.changeBackground(oData.bg);
}
}, this)
});
}, this)
});
$(document).bind('keypress', function(e) {
if (e.keyCode == 37) {
$('#slider').cycle('prev');
} else if (e.keyCode == 39) {
$('#slider').cycle('next');
}
});
this.changeBackground(oData.info.image_bg);
$("a[rel^='prettyPhoto']").prettyPhoto(this.prettyPhotoOptions);
}, this)
});
},
setCurrentSubPage: function(current_sub_page) {
this.current_sub_page = current_sub_page;
},
initBureau: function() {
$('#page_8_id_2').bind('click', $.proxy(function(evt) {
evt.preventDefault();
evt.stopPropagation();
this.setBureau($(evt.target).attr('href'));
this.setCurrentSubPage('#' + $(evt.target).parent().attr('id'));
this.drawLines();
}, this));
$('#page_8_id_3').bind('click', $.proxy(function(evt) {
evt.preventDefault();
evt.stopPropagation();
this.setBureau($(evt.target).attr('href'));
this.setCurrentSubPage('#' + $(evt.target).parent().attr('id'));
this.drawLines();
}, this));
$('#page_8_id_4').bind('click', $.proxy(function(evt) {
evt.preventDefault();
evt.stopPropagation();
this.setBureau($(evt.target).attr('href'));
this.setCurrentSubPage('#' + $(evt.target).parent().attr('id'));
this.drawLines();
}, this));
$('#page_8_id_5').bind('click', $.proxy(function(evt) {
evt.preventDefault();
evt.stopPropagation();
this.setBureau($(evt.target).attr('href'));
this.setCurrentSubPage('#' + $(evt.target).parent().attr('id'));
this.drawLines();
}, this));
$('#page_8_id_7').bind('click', $.proxy(function(evt) {
evt.preventDefault();
evt.stopPropagation();
this.setBureau($(evt.target).attr('href'));
this.setCurrentSubPage('#' + $(evt.target).parent().attr('id'));
this.drawLines();
}, this));
},
setBureau: function(uri) {
$.ajax({
url: uri,
type: "GET",
success: $.proxy(function(data) {
$('#page_8 .content').html(data);
var bg = uri.split('/');
this.changeBackground('', bg[parseInt(bg.length) - 1]);
$('#page_8 .content div.scroll').scrollable({
vertical: true,
mousewheel: true,
next: ".up",
prev: ".down"
});
}, this)
});
},
positionMenuItems: function() {
var width = $(window).width();
var height = $(window).height();
var correctionTop = 40;
var correctionTopMtp = 0;
switch (true) {
case ((height <= 590) && (height > 1)):
correctionTopMtp = 6;
break;
case ((height <= 770) && (height > 600)):
correctionTopMtp = 4;
break;
case ((height <= 850) && (height > 800)):
correctionTopMtp = 2;
break;
case (height > 930):
correctionTopMtp = 0;
break;
}
var correctionRight = 40;
var correctionRightMtp = 0;
switch (true) {
case (width <= 1024):
correctionRightMtp = 1;
break;
}
// CONTACT
$('#page2_id_3').css({
'left': (202 - (correctionRight * correctionRightMtp * 3)) + 'px',
'top': (162 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
$('#page2_id_4').css({
'left': (202 - (correctionRight * correctionRightMtp * 3)) + 'px',
'top': (322 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
$('#page2_id_5').css({
'left': (282 - (correctionRight * correctionRightMtp * 3)) + 'px',
'top': (442 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
$('#page2_id_6').css({
'left': (202 - (correctionRight * correctionRightMtp * 3)) + 'px',
'top': (562 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
$('#page2_id_7').css({
'left': (402 - (correctionRight * correctionRightMtp * 3)) + 'px',
'top': (522 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
$('#page_2 div.content').css({
'left': (522 - (correctionRight * correctionRightMtp * 5)) + 'px',
'top': (parseInt((320 - ((correctionTop * correctionTopMtp * 1) * 1.2)) / 40)) * 40 + 'px'
});
if (width <= 0) {
$('#page_2 div.content').css({
'top': (((parseInt((320 - ((correctionTop * correctionTopMtp * 1) * 1.5)) / 40)) * 40) - 40) + 'px'
});
}
// HOMEPAGE
$('#page5_id_1').css({
'left': (842 - (correctionRight * correctionRightMtp * 1)) + 'px',
'top': (442 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
$('#page5_id_2').css({
'left': (722 - (correctionRight * correctionRightMtp * 3)) + 'px',
'top': (282 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
$('#page5_id_3').css({
'left': (482 - (correctionRight * correctionRightMtp * 3)) + 'px',
'top': (parseInt((402 - ((correctionTop * correctionTopMtp * 1) * 1.5)) / 40)) * 40 + 'px'
});
$('#page5_id_4').css({
'left': (882 - (correctionRight * correctionRightMtp * 4)) + 'px',
'top': (322 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
$('#page_5 div.content').css({
'left': (122 - (correctionRight * correctionRightMtp * 1)) + 'px',
'top': (parseInt((480 - ((correctionTop * correctionTopMtp * 1) * 1.5)) / 40)) * 40 + 'px'
});
// BUREAU
$('#page8_id_1').css({
'left': (722 - (correctionRight * correctionRightMtp * 1)) + 'px',
'top': (642 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
$('#page8_id_2').css({
'left': (1002 - (correctionRight * correctionRightMtp * 1)) + 'px',
'top': (402 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
$('#page8_id_3').css({
'left': (842 - (correctionRight * correctionRightMtp * 1)) + 'px',
'top': (482 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
$('#page8_id_4').css({
'left': (882 - (correctionRight * correctionRightMtp * 1)) + 'px',
'top': (562 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
$('#page8_id_5').css({
'left': (602 - (correctionRight * correctionRightMtp * 1)) + 'px',
'top': (562 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
$('#page8_id_6').css({
'left': (842 - (correctionRight * correctionRightMtp * 1)) + 'px',
'top': (682 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
$('#page8_id_7').css({
'left': (962 - (correctionRight * correctionRightMtp * 1)) + 'px',
'top': (642 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
var correctionLeft = 0;
if (correctionTop > 160) {
correctionTop = 160;
correctionLeft = 40;
}
// BUREAU CONTENT AREA
$('#page_8 div.content').css({
'left': (122 + correctionLeft) + 'px',
'top': (200 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
$('#page2_id_1').css({
'left': '522px',
'top': (162 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
$('#page2_id_2').css({
'left': '342px',
'top': (242 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
if (width <= 1024) {
$('#page2_id_2').css({
'left': '302px',
'top': (202 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
}
$('#page5_id_5').css({
'left': '442px',
'top': (202 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
// CONTACT CONTENT AREA
$('#page_6 div.content').css({
'top': (200 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
if (correctionTop > 80) {
correctionLeft = 80;
}
if (correctionTop > 40) {
correctionTop = 40;
correctionLeft = 40;
}
$('#page6_id_1').css({
'left': (402 + correctionLeft) + 'px'
});
$('#page6_id_1').css({
'top': '42px'
});
if (height <= 650) {
$('#page6_id_1').css({
'top': (42 - correctionTop) + 'px'
});
}
// CONTACT CONTENT AREA
$('#page_6 div.content').css({
'left': (122 + correctionLeft) + 'px'
});
}
});
var Archikon = Class.create({
// options
options : {
backend : false,
lineWidth: 1
},
current_page: '',
current_sub_page: '',
current_project: '',
bgImages: [
//'images/backgrounds/bureau-kwaliteit.jpg',
//'images/backgrounds/bureau-team.jpg',
'images/backgrounds/bureau-home.jpg',
'images/backgrounds/image-roosters.jpg'
//'images/backgrounds/bureau-visie.jpg',
//'images/backgrounds/project-bg.jpg',
//'images/backgrounds/contact.jpg'
],
bgs : [],
prettyPhotoOptions: {
show_title: true,
social_tools: false,
deeplinking: false,
theme: 'light_square',
gallery_markup: '',
modal: false
},
initialize : function(options) {
// setup options
this.options = options;
if ( $.browser.msie ) {
if ( parseInt($.browser.version, 10) < 7 ) {
return false;
}
}
if (this.options.bgs.length > 0) {
this.bgs = $.parseJSON(this.options.bgs);
}
this.current_page = '#page_5';
this.current_sub_page = '#page8_id_2';
this.current_project = '#page2_id_1';
this.initScreen();
this.preloadImages($.proxy(function(){
this.initMenu();
this.scrollPageEvents();
this.initHomeButton();
this.drawLines();
}, this));
// Window resize (IE and Safari fire this event continually)
$(window).resize($.proxy(function(){
$.doTimeout( 'resize', 250, $.proxy(function(){
this.initScreen();
this.drawLines();
$.scrollTo(this.current_page , 1000);
}, this));
}, this));
},
preloadImages : function(callback) {
if ( $.browser.msie ) {
$.scrollTo('#page_5', 1000, {
onAfter: $.proxy(function () {
$('.logo, .social').fadeIn(500);
this.changeBackground('', 'homepage', callback);
}, this)
});
} else {
$.preLoadImages('images/loader.gif', $.proxy(function(){
$('<img />').attr({
src : 'images/loader.gif',
alt : 'Loading..',
title : 'Loading..'
}).attr('class', 'left').appendTo('#loading');
//$.ajax({
// url: 'projecten/all-images',
// type: "GET",
// success: $.proxy(function(data){
// oData = jQuery.parseJSON(data);
// $.preLoadImages(oData, $.proxy(function(){
$.preLoadImages(this.bgImages, $.proxy(function(){
$.preLoadCSSImages($.proxy(function() {
$.scrollTo(this.current_page, 1000, {
onAfter: $.proxy(function () {
$('.logo, .social').fadeIn(500);
this.changeBackground('', 'homepage', callback);
}, this)
});
}, this))
}, this));
//}, this));
//}, this)
//});
}, this));
}
},
initScreen : function() {
var width = $(window).width();
$('body').css('width', width);
$('#container').css('width', width * 3);
$('#archikon').css('width', width * 3);
$('#archikon_canvas').css('width', width * 3);
$('#archikon div').css('width', width * 3);
$('.page').css('width', width);
$('.background').css('width', width);
$('.background2').css('width', width);
var height = $(window).height();
$('body').css('height', height);
$('#container').css('height', height * 3);
$('#archikon').css('height', height * 3);
$('#archikon_canvas').css('height', height * 3);
$('#archikon div').css('height', height * 3);
$('.page').css('height', height);
if($('head link:last').attr('id') != 'cssContent') {
$("head").append("<link>");
}
var oDate = new Date();
css = $("head").children(":last");
if (height > 700) {
css.attr({
rel: "stylesheet",
type: "text/css",
href: "css/big.css?cb=" + oDate.getTime(),
id: "cssContent"
});
} else {
css.attr({
rel: "stylesheet",
type: "text/css",
href: "css/small.css?cb=" + oDate.getTime(),
id: "cssContent"
});
}
this.positionMenuItems();
},
initMenu: function () {
$('div.menu a').click(function () {
if (!$(this).parent().hasClass('active')) {
$('div.menu a').each(function () {
$(this).parent().removeClass('activestate')
});
$(this).parent().addClass('activestate')
}
});
},
scrollPageEvents: function () {
// scroll naar projecten
this.scrollPageEvent($('#page_5_id_5'), '#page_2', '', $.proxy(function () {
this.initProjects();
this.initProject("projecten/woningbouw");
}, this), '');
// scroll naar contact
this.scrollPageEvent($('#page_5_id_2'), '#page_6', '', $.proxy(function () {
this.initForms();
$(document).unbind('keypress');
}, this), 'contact');
// scroll naar bureau
this.scrollPageEvent($('#page_5_id_1'), '#page_8', '', $.proxy(function () {
this.initBureau();
this.setBureau("content/visie");
}, this), 'visie');
},
scrollPageEvent: function (elmButton, elmTo, bgImage, callback, category) {
elmButton.bind('click', $.proxy(function(){
this.current_page = elmTo;
$('a#home').fadeIn(1000);
this.changeBackground(bgImage, category, callback);
if (typeof callback == 'function') {
callback();
}
$.scrollTo(elmTo, 1000);
switch(elmTo){
case '#page_2':
$(this.current_project).addClass('activestate');
break;
case '#page_6':
$('#page6_id_1').addClass('activestate');
break;
case '#page_8':
$(this.current_sub_page).addClass('activestate');
break;
}
},this));
},
drawLinesInMenuIE : function(menuItems) {
$(menuItems).each(
function() {
var srcHeight = 0;
var trgHeight = 0;
var srcWidth = 0;
var trgWidth = 0;
var menuDiv = $(this).parent();
if ($(this).attr("rel")) {
var srcOffset = $(this).offset();
if (menuDiv.hasClass('rb') || menuDiv.hasClass('lb')) {
srcHeight = menuDiv.height();
}
if (menuDiv.hasClass('rb') || menuDiv.hasClass('rt')) {
srcWidth = menuDiv.width();
}
var targetDiv = $("#" + $(this).attr("rel")).parent();
if (targetDiv.length) {
var trgOffset = targetDiv.offset();
if (targetDiv.hasClass('rb') || targetDiv.hasClass('lb')) {
trgHeight = targetDiv.height();
}
if (targetDiv.hasClass('rb') || targetDiv.hasClass('rt')) {
trgWidth = targetDiv.width();
}
$("#archikon_canvas").drawLine(srcOffset.left + srcWidth,
srcOffset.top + srcHeight,
trgOffset.left + trgWidth,
trgOffset.top + trgHeight, {color: '#fff'});
}
}
}
);
},
drawLineIE: function(srcElement, trgElement){
var srcHeight = 0;
var srcWidth = 0;
var trgHeight = 0;
var trgWidth = 0;
var srcOffset = srcElement.offset();
if (srcElement.hasClass('rb') || srcElement.hasClass('lb')) {
srcHeight = srcElement.height();
}
if (srcElement.hasClass('rb') || srcElement.hasClass('rt')) {
srcWidth = srcElement.width();
}
var trgOffset = trgElement.offset();
if (trgElement.hasClass('rb') || trgElement.hasClass('lb')) {
trgHeight = trgElement.height();
}
if (trgElement.hasClass('rb') || trgElement.hasClass('rt')) {
trgWidth = trgElement.width();
}
$("#archikon_canvas").drawLine(srcOffset.left + srcWidth,
srcOffset.top + srcHeight,
trgOffset.left + trgWidth,
trgOffset.top + trgHeight, {color: '#fff'});
},
drawLines: function() {
$('#archikon_canvas').empty();
var height = $(window).height();
var width = $(window).width();
if ( $.browser.msie ) {
if ( parseInt($.browser.version, 10) < 9 ) {
this.drawLinesInMenuIE($(".menu a"));
// this lines are allways visible
this.drawLineIE($('#page5_id_5'), $('#page_2_id_2'));
this.drawLineIE($('#page8_id_1'), $('#page5_id_1'));
this.drawLineIE($('#page8_id_3'), $('#page8_id_2'));
this.drawLineIE($('#page_6 .content h1'), $('#page6_id_1'));
// this lines are drawn dynamicly based on the current page / project
this.drawLineIE($('#project_title_1'), $(this.current_project));
this.drawLineIE($('#page_8 .content h1'), $(this.current_sub_page));
}
} else {
var canvasJq = $("#archikon");
var cOffset = canvasJq.offset();
var canvasEl = canvasJq[0];
//var canvasEl = document.getElementById("archikon");
if (typeof(G_vmlCanvasManager) != 'undefined') {
canvasEl = G_vmlCanvasManager.initElement(canvasEl);
}
canvasEl.width = canvasJq.width();
canvasEl.height = canvasJq.height();
if (canvasEl.getContext) {
//alert('yes');
var ctx = canvasEl.getContext('2d');
ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
//ctx.fillStyle = "rgba(0, 0, 255, .5)";
//ctx.fillRect(0, 0, canvasEl.width, canvasEl.height);
ctx.beginPath();
ctx.moveTo( 100, 150);
ctx.lineTo( 300, 350);
this.drawLinesInMenu(ctx, $(".menu a"), cOffset);
// this lines are allways visible
this.drawLine(ctx, $('#page5_id_5'), $('#page_2_id_2'), cOffset);
this.drawLine(ctx, $('#page8_id_1'), $('#page5_id_1'), cOffset);
this.drawLine(ctx, $('#page8_id_3'), $('#page8_id_2'), cOffset);
this.drawLine(ctx, $('#page_6 .content h1'), $('#page6_id_1'), cOffset);
// this lines are drawn dynamicly based on the current page / project
this.drawLine(ctx, $('#project_title_1'), $(this.current_project), cOffset);
this.drawLine(ctx, $('#page_8 .content h1'), $(this.current_sub_page), cOffset);
ctx.strokeStyle = '#fff';
ctx.lineWidth = 1;
ctx.stroke();
ctx.closePath();
$.scrollTo(this.current_page, 1000, {
onAfter: function () {
//$('.background, .logo, .social').fadeIn(800)
$('.logo, .social').fadeIn(800)
}
});
} else {
//alert('no canvas');
}
}
},
drawLinesInMenu : function( ctx , menuItems, cOffset ) {
$(menuItems).each(
function() {
var srcHeight = 0;
var trgHeight = 0;
var srcWidth = 0;
var trgWidth = 0;
var menuDiv = $(this).parent();
if ($(this).attr("rel")) {
var srcOffset = $(this).offset();
if (menuDiv.hasClass('rb') || menuDiv.hasClass('lb')) {
srcHeight = menuDiv.height();
}
if (menuDiv.hasClass('rb') || menuDiv.hasClass('rt')) {
srcWidth = menuDiv.width();
}
var targetDiv = $("#" + $(this).attr("rel")).parent();
if (targetDiv.length) {
var trgOffset = targetDiv.offset();
if (targetDiv.hasClass('rb') || targetDiv.hasClass('lb')) {
trgHeight = targetDiv.height();
}
if (targetDiv.hasClass('rb') || targetDiv.hasClass('rt')) {
trgWidth = targetDiv.width();
}
ctx.moveTo( srcOffset.left - cOffset.left + srcWidth, srcOffset.top - cOffset.top + srcHeight);
ctx.lineTo( trgOffset.left - cOffset.left + trgWidth, trgOffset.top - cOffset.top + trgHeight);
}
}
}
);
},
drawLine: function (ctx, srcElement, trgElement, cOffset) {
var srcHeight = 0;
var srcWidth = 0;
var trgHeight = 0;
var trgWidth = 0;
var srcOffset = srcElement.offset();
if (srcElement.hasClass('rb') || srcElement.hasClass('lb')) {
srcHeight = srcElement.height();
}
if (srcElement.hasClass('rb') || srcElement.hasClass('rt')) {
srcWidth = srcElement.width();
}
var trgOffset = trgElement.offset();
if (trgElement.hasClass('rb') || trgElement.hasClass('lb')) {
trgHeight = trgElement.height();
}
if (trgElement.hasClass('rb') || trgElement.hasClass('rt')) {
trgWidth = trgElement.width();
}
ctx.moveTo(srcOffset.left - cOffset.left + srcWidth, srcOffset.top - cOffset.top + srcHeight);
ctx.lineTo(trgOffset.left - cOffset.left + trgWidth, trgOffset.top - cOffset.top + trgHeight);
},
changeBackground: function (bgImage, category, callback) {
if (typeof category == 'string' && category != ''){
bgImage = this.bgs[category][Math.floor(Math.random() * this.bgs[category].length)];
} else if ((typeof bgImage == 'undefined') || bgImage == '') {
bgImage = this.bgImages[Math.floor(Math.random()*this.bgImages.length)];
}
$.backstretch(bgImage, {speed: 500});
if (typeof callback == 'function') {
callback();
}
},
initHomeButton: function () {
$('a#home, div.logo').bind('click', $.proxy(function(){
$(document).unbind('keypress');
this.current_page = '#page_5';
this.changeBackground('', 'homepage');
$('a#home').fadeOut(800);
$.scrollTo('#page_5', 1000);
}, this));
},
initForms: function () {
$('div.form.generator form').each(function () {
var oForm = new FormHandler({
form: this,
ajax: true
});
});
},
setCurrentProject: function (current_project) {
this.current_project = current_project;
},
initProjects: function () {
$('#page_2_id_1').bind('click', $.proxy(function (evt) {
evt.preventDefault();
evt.stopPropagation();
this.initProject($(evt.target).attr('href'));
this.setCurrentProject('#' + $(evt.target).parent().attr('id'));
this.drawLines();
}, this));
$('#page_2_id_3').bind('click', $.proxy(function (evt) {
evt.preventDefault();
evt.stopPropagation();
this.initProject($(evt.target).attr('href'));
this.setCurrentProject('#' + $(evt.target).parent().attr('id'));
this.drawLines();
}, this));
$('#page_2_id_4').bind('click', $.proxy(function (evt) {
evt.preventDefault();
evt.stopPropagation();
this.initProject($(evt.target).attr('href'));
this.setCurrentProject('#' + $(evt.target).parent().attr('id'));
this.drawLines();
}, this));
$('#page_2_id_5').bind('click', $.proxy(function (evt) {
evt.preventDefault();
evt.stopPropagation();
this.initProject($(evt.target).attr('href'));
this.setCurrentProject('#' + $(evt.target).parent().attr('id'));
this.drawLines();
}, this));
$('#page_2_id_6').bind('click', $.proxy(function (evt) {
evt.preventDefault();
evt.stopPropagation();
this.initProject($(evt.target).attr('href'));
this.setCurrentProject('#' + $(evt.target).parent().attr('id'));
this.drawLines();
}, this));
$('#page_2_id_7').bind('click', $.proxy(function (evt) {
evt.preventDefault();
evt.stopPropagation();
this.initProject($(evt.target).attr('href'));
this.setCurrentProject('#' + $(evt.target).parent().attr('id'));
this.drawLines();
}, this));
},
initProject: function (uri) {
$.ajax({
url: uri,
type: "GET",
success: $.proxy(function(data){
oData = jQuery.parseJSON(data);
$('#page_2 .content').html(oData.projecten);
$('.projects').cycle({
requeueTimeout: 500,
timeout: 0,
speed : 800,
cleartype: 1,
fx : 'scrollBothWays',
next : '#nextproject',
prev : '#previousproject',
onPrevNextEvent: $.proxy(function(isNext, zeroBasedSlideIndex, slideElement) {
var project_id = $(slideElement).attr('class').replace('project project_', '');
var uri = 'projecten/afbeeldingen/project_id/' + project_id;
$.ajax({
url: uri,
type: "GET",
success: $.proxy(function(data){
oData = jQuery.parseJSON(data);
if (typeof oData.html != 'undefined') {
$('div.project_samples').html(oData.html);
$("a[rel^='prettyPhoto']").prettyPhoto(this.prettyPhotoOptions);
this.changeBackground(oData.bg);
}
}, this)
});
}, this)
});
$(document).bind('keypress', function(e) {
if (e.keyCode == 37) {
$('#slider').cycle('prev');
} else if (e.keyCode == 39) {
$('#slider').cycle('next');
}
});
this.changeBackground(oData.info.image_bg);
$("a[rel^='prettyPhoto']").prettyPhoto(this.prettyPhotoOptions);
}, this)
});
},
setCurrentSubPage: function (current_sub_page) {
this.current_sub_page = current_sub_page;
},
initBureau: function () {
$('#page_8_id_2').bind('click', $.proxy(function (evt) {
evt.preventDefault();
evt.stopPropagation();
this.setBureau($(evt.target).attr('href'));
this.setCurrentSubPage('#' + $(evt.target).parent().attr('id'));
this.drawLines();
}, this));
$('#page_8_id_3').bind('click', $.proxy(function (evt) {
evt.preventDefault();
evt.stopPropagation();
this.setBureau($(evt.target).attr('href'));
this.setCurrentSubPage('#' + $(evt.target).parent().attr('id'));
this.drawLines();
}, this));
$('#page_8_id_4').bind('click', $.proxy(function (evt) {
evt.preventDefault();
evt.stopPropagation();
this.setBureau($(evt.target).attr('href'));
this.setCurrentSubPage('#' + $(evt.target).parent().attr('id'));
this.drawLines();
}, this));
$('#page_8_id_5').bind('click', $.proxy(function (evt) {
evt.preventDefault();
evt.stopPropagation();
this.setBureau($(evt.target).attr('href'));
this.setCurrentSubPage('#' + $(evt.target).parent().attr('id'));
this.drawLines();
}, this));
$('#page_8_id_7').bind('click', $.proxy(function (evt) {
evt.preventDefault();
evt.stopPropagation();
this.setBureau($(evt.target).attr('href'));
this.setCurrentSubPage('#' + $(evt.target).parent().attr('id'));
this.drawLines();
}, this));
},
setBureau: function (uri) {
$.ajax({
url: uri,
type: "GET",
success: $.proxy(function(data){
$('#page_8 .content').html(data);
var bg = uri.split('/');
this.changeBackground('', bg[parseInt(bg.length) - 1]);
$('#page_8 .content div.scroll').scrollable({
vertical: true,
mousewheel: true,
next: ".up",
prev: ".down"
});
}, this)
});
},
positionMenuItems : function () {
var width = $(window).width();
var height = $(window).height();
var correctionTop = 40;
var correctionTopMtp = 0;
switch (true) {
case ((height <= 590) && (height > 1)):
correctionTopMtp = 6;
break;
case ((height <= 770) && (height > 600)):
correctionTopMtp = 4;
break;
case ((height <= 850) && (height > 800)):
correctionTopMtp = 2;
break;
case (height > 930):
correctionTopMtp = 0;
break;
}
var correctionRight = 40;
var correctionRightMtp = 0;
switch(true) {
case (width <= 1024):
correctionRightMtp = 1;
break;
}
// CONTACT
$('#page2_id_3').css({
'left': (202 - (correctionRight * correctionRightMtp * 3)) + 'px',
'top': (162 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
$('#page2_id_4').css({
'left': (202 - (correctionRight * correctionRightMtp * 3)) + 'px',
'top': (322 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
$('#page2_id_5').css({
'left': (282 - (correctionRight * correctionRightMtp * 3)) + 'px',
'top': (442 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
$('#page2_id_6').css({
'left': (202 - (correctionRight * correctionRightMtp * 3)) + 'px',
'top': (562 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
$('#page2_id_7').css({
'left': (402 - (correctionRight * correctionRightMtp * 3)) + 'px',
'top': (522 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
$('#page_2 div.content').css({
'left': (522 - (correctionRight * correctionRightMtp * 5)) + 'px',
'top': (parseInt((320 - ((correctionTop * correctionTopMtp * 1) * 1.2))/40))*40 + 'px'
});
if (width <= 0) {
$('#page_2 div.content').css({
'top': (((parseInt((320 - ((correctionTop * correctionTopMtp * 1) * 1.5))/40))*40) - 40) + 'px'
});
}
// HOMEPAGE
$('#page5_id_1').css({
'left': (842 - (correctionRight * correctionRightMtp * 1)) + 'px',
'top': (442 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
$('#page5_id_2').css({
'left': (722 - (correctionRight * correctionRightMtp * 3)) + 'px',
'top': (282 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
$('#page5_id_3').css({
'left': (482 - (correctionRight * correctionRightMtp * 3)) + 'px',
'top': (parseInt((402 - ((correctionTop * correctionTopMtp * 1) * 1.5))/40))*40 + 'px'
});
$('#page5_id_4').css({
'left': (882 - (correctionRight * correctionRightMtp * 4)) + 'px',
'top': (322 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
$('#page_5 div.content').css({
'left': (122 - (correctionRight * correctionRightMtp * 1)) + 'px',
'top': (parseInt((480 - ((correctionTop * correctionTopMtp * 1) * 1.5))/40))*40 + 'px'
});
// BUREAU
$('#page8_id_1').css({
'left': (722 - (correctionRight * correctionRightMtp * 1)) + 'px',
'top': (642 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
$('#page8_id_2').css({
'left': (1002 - (correctionRight * correctionRightMtp * 1)) + 'px',
'top': (402 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
$('#page8_id_3').css({
'left': (842 - (correctionRight * correctionRightMtp * 1)) + 'px',
'top': (482 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
$('#page8_id_4').css({
'left': (882 - (correctionRight * correctionRightMtp * 1)) + 'px',
'top': (562 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
$('#page8_id_5').css({
'left': (602 - (correctionRight * correctionRightMtp * 1)) + 'px',
'top': (562 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
$('#page8_id_6').css({
'left': (842 - (correctionRight * correctionRightMtp * 1)) + 'px',
'top': (682 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
$('#page8_id_7').css({
'left': (962 - (correctionRight * correctionRightMtp * 1)) + 'px',
'top': (642 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
var correctionLeft = 0;
if (correctionTop > 160) {
correctionTop = 160;
correctionLeft = 40;
}
// BUREAU CONTENT AREA
$('#page_8 div.content').css({
'left': (122 + correctionLeft) + 'px',
'top': (200 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
$('#page2_id_1').css({
'left': '522px',
'top': (162 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
$('#page2_id_2').css({
'left': '342px',
'top': (242 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
if (width <= 1024) {
$('#page2_id_2').css({
'left': '302px',
'top': (202 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
}
$('#page5_id_5').css({
'left': '442px',
'top': (202 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
// CONTACT CONTENT AREA
$('#page_6 div.content').css({
'top': (200 - (correctionTop * correctionTopMtp * 1)) + 'px'
});
if (correctionTop > 80) {
correctionLeft = 80;
}
if (correctionTop > 40) {
correctionTop = 40;
correctionLeft = 40;
}
$('#page6_id_1').css({
'left': (402 + correctionLeft) + 'px'
});
$('#page6_id_1').css({
'top': '42px'
});
if (height <= 650) {
$('#page6_id_1').css({
'top': (42 - correctionTop) + 'px'
});
}
// CONTACT CONTENT AREA
$('#page_6 div.content').css({
'left': (122 + correctionLeft) + 'px'
});
}
});
- Follow @usejquery Showcase RSS
-
Categories
-
Blog Posts
-
Partner
-
Links Of Interest
-
Latest Site
-
Startups, This Is How Design Works
Startups, This Is How Design Works
-