var FG_imagePath = '/images/firegrid/showcase'; var FG_host = 'www.firedesign.co.nz'; var FG_currentImage = false; var FG_currentCategory = false; var FG_status = 'init'; var FG_autoScrollFlag = 0; var FG_inScroll = 0; var FG_inSlide = 0; var FG_transition = 'standard'; //standard | random | down | up | left | right var FG_portfolio = new Object; var FG_categories = new Array('Advertising','Billboards','Branding','Illustration','Print','Websites'); var FG_nextTitle = ''; var FG_prevTitle = ''; var FG_nextCategory = ''; var FG_prevCategory = ''; var FG_catScrollLeft = new Array(); var FG_catScrollRight = new Array(); var FG_displayTransition = null; var FG_categoriesTransition = null; FG_portfolio.Advertising = new Object; FG_portfolio.Advertising.id = new Array('84','83','82','81','80','79'); FG_portfolio.Advertising.img = new Array('kudos.jpg','churchwood_bridal.jpg','ford.jpg','element.jpg','dk_law.jpg','dalgleish.jpg'); FG_portfolio.Advertising.title = new Array('Kudos','Churchwood Bridal','Ford','Element','DK Law','Dalgleish'); FG_portfolio.Advertising.pos = 0; FG_portfolio.Billboards = new Object; FG_portfolio.Billboards.id = new Array('59','58','57','56','55','54'); FG_portfolio.Billboards.img = new Array('west_coast_marine.jpg','taranaki_rugby_league.jpg','lisa_tamati.jpg','ez_towel.jpg','crowded_house.jpg','big_media.jpg'); FG_portfolio.Billboards.title = new Array('West Coast Marine','Taranaki Rugby League','Lisa Tamati','EZ Towel','Crowded House','Big Media'); FG_portfolio.Billboards.pos = 0; FG_portfolio.Branding = new Object; FG_portfolio.Branding.id = new Array('53','52','51','50','49','48'); FG_portfolio.Branding.img = new Array('wanaka_bay_village.jpg','taranaki_sharks.jpg','taranaki_hardcore.jpg','nicholsons_lawyers.jpg','matador_fresh.jpg','adriatic.jpg'); FG_portfolio.Branding.title = new Array('Wanaka Bay Village','Taranaki Sharks','Taranaki Hardcore','Nicholsons Lawyers','Matador Fresh','Adriatic'); FG_portfolio.Branding.pos = 0; FG_portfolio.Illustration = new Object; FG_portfolio.Illustration.id = new Array('77','76','75','74','73','72'); FG_portfolio.Illustration.img = new Array('flax_-_taranaki.jpg','flax_-_nz_cow.jpg','flax_-_chur.jpg','coastlines_-_polish.jpg','coastlines_-_penguin.jpg','coastlines_-_cabbage_tree.jpg'); FG_portfolio.Illustration.title = new Array('Flax - Taranaki','Flax - NZ Cow','Flax - Chur','Coastlines - Polish','Coastlines - Penguin','Coastlines - Cabbage Tree'); FG_portfolio.Illustration.pos = 0; FG_portfolio.Print = new Object; FG_portfolio.Print.id = new Array('95','94','93','92','91','90','89','88','87','86'); FG_portfolio.Print.img = new Array('live_june_2009.jpg','live_february_2009.jpg','live_november_2008.jpg','live_october_2008.jpg','live_september_2008.jpg','live_august_2008.jpg','live_july_2008.jpg','live_june_2008.jpg','live_may_2008.jpg','live_april_2008.jpg'); FG_portfolio.Print.title = new Array('Live June 2009','Live February 2009','Live November 2008','Live October 2008','Live September 2008','Live August 2008','Live July 2008','Live June 2008','Live May 2008','Live April 2008'); FG_portfolio.Print.pos = 0; FG_portfolio.Websites = new Object; FG_portfolio.Websites.id = new Array('100','99','98','97','96','71','70','69','68','67','66','65','62'); FG_portfolio.Websites.img = new Array('www.kudosclothing.co.nz.jpg','www.clarkellice.com.jpg','www.steelformers.co.nz.jpg','www.hamiltondental.co.nz.jpg','www.siroccofiberworks.co.nz.jpg','www.taranakieng.co.nz.jpg','www.nzgolftours.co.nz.jpg','giftid.jpg','www.ecobag.co.nz.jpg','www.churchwoodbridal.co.nz.jpg','big_media.jpg','lisa_tamati.jpg','cory_hutchings.jpg'); FG_portfolio.Websites.title = new Array('www.kudosclothing.co.nz','www.clarkellice.com','www.steelformers.co.nz','www.hamiltondental.co.nz','www.siroccofiberworks.co.nz','www.taranakieng.co.nz','www.nzgolftours.co.nz','Giftid','www.ecobag.co.nz','www.churchwoodbridal.co.nz','Big Media','Lisa Tamati','Cory Hutchings'); FG_portfolio.Websites.pos = 0; /** * Initialise the application */ function FG_init() { FG_loading(); //FG_loadItems.delay(2.5); //FG_initCategories.delay(2.5); FG_thumbsAppear.delay(3.0); } function FG_initCategories() { //for each category for (var i = 0; i < FG_categories.length-1; i++) { //set category events var cat = FG_categories[i]; //get the category descendents and filter the thumbnails var tmp = $(FG_categories[i]).descendants(); tmp.each(function(c) { var className = c.getAttribute('class'); if (className == 'firegrid_thumbnail') { // var id = c.getAttribute('id'); // var arr = FG_portfolio.FG_categories[i]; // arr[arr.length] = id; //now that we have all the thumbnails in this category we can do some work // $('debug').innerHTML = $('debug').innerHTML + id + '
'; } }) } } function FG_loadItems() { for (var i = 0; i < FG_categories.length; i++) { FG_portfolio.FG_categories[i] = new Array(); var tmp = $(FG_categories[i]).descendants(); tmp.each(function(c) { var className = c.getAttribute('class'); if (className == 'firegrid_thumbnail') { var id = c.getAttribute('id'); var arr = FG_portfolio.FG_categories[i]; arr[arr.length] = id; $('debug').innerHTML = $('debug').innerHTML + id + '
'; } }) } } /** * Set the loading gif to give time for thumbnails to be downloaded */ function FG_loading() { FG_status = 'loading'; //set heading $('firegrid_head').appear(); $('firegrid_heading').innerHTML = 'LOADING...'; //create loading img obj var FG_image = document.createElement("img"); //align loading img var FG_dim = $('firegrid').getDimensions(); FG_image.style.position = 'absolute'; FG_image.style.marginLeft = (FG_dim.width/2 - 16) + 'px'; FG_image.style.marginTop = (FG_dim.height/2 - 16) + 'px'; //load image and hide it ready to used FG_image.src = '/images/firegrid_loading.gif'; FG_image.setAttribute('id','firegrid_loading'); //insert logo into page var FG_obj = $('firegrid'); FG_obj.insertBefore(FG_image, FG_obj.firstChild); } /** * Make thumbnails appear and set event functions */ function FG_thumbsAppear(duration) { if (duration == null) { duration = 3.0; } //iterate through each thumbnail and fade them in at different times $$('.firegrid_thumbnail').each(function(s){ var d = Math.random()*duration; var id = s.getAttribute('id'); $(id).appear({ duration: 1.0, delay: d }); $(id).onmouseover = function(){FG_highlightThumb(id)}; $(id).onmouseout = function(){FG_unhighlightThumb(id)}; }) //fade out loading gif $('firegrid_loading').fade(); $('firegrid_head').fade(); FG_status = 'active'; } function FG_thumbsFade(duration) { if (duration == null) { duration = 3.0; } //iterate through each thumbnail and fade them in at different times $$('.firegrid_thumbnail').each(function(s){ var d = Math.random()*duration; var id = s.getAttribute('id'); $(id).fade({ duration: 1.0, delay: d }); }) } /** * Turn of autoscroll */ function FG_autoScrollOff() { FG_autoScrollFlag = 0; } /** * Turn off the "currently in scroll" flag */ function FG_inScrollOff() { FG_inScroll = 0; } function FG_thumbsScroll(cat, dir, auto) { //by default auto scroll should be disabled if (auto == null){ auto = false; } if (auto) { alert('Auto scroll is still a bit buggy, need to fix this first'); } //if we are currently animating a scroll we can do anything if (FG_inScroll == 1) { return false; } //set scroll animation flag FG_inScroll = 1; var tmpCount = FG_portfolio[cat].id; var catLength = tmpCount.length; //if we have more than 6 images allow scrolling if (catLength > 6) { //get current slide margin var marginLeft = $(cat+'_slider').style.marginLeft; marginLeft = Number(marginLeft.sub('px', '')); if (dir == 'right') { //if we can still go right if ((FG_portfolio[cat].pos + 6) < catLength) { FG_autoScrollFlag = 1; //set autosrcoll is allowable here marginLeft = marginLeft - 74; //get new margin //do the slide new Effect.Morph(cat+'_slider', {style: 'margin-left:' + marginLeft + 'px;', duration: 0.5 }); //turn off the scroll animation flag once the animation has finished FG_inScrollOff.delay(0.6); //update our position FG_portfolio[cat].pos++; //if we can go anyfurthre to the right, disabled the button if ((FG_portfolio[cat].pos + 6) == catLength) { new Effect.Puff(cat+'_right_button', {duration: 0.5}); FG_autoScrollFlag = 0; } //make sure the left button is now clickable if ($(cat+'_left_button').style.display == 'none') { new Effect.Appear(cat+'_left_button', {duration: 0.5}); } } else { //if we try to go further than we can, pulse the category if (!auto) { new Effect.Pulsate(cat, {pulses: 1, from: 0.6, duration: 0.25}); } //auto scrolling is no longer allowable FG_autoScrollFlag = 0; FG_inScrollOff(); } } if (dir == 'left') { //if we can still go right if (FG_portfolio[cat].pos != 0) { FG_autoScrollFlag = 1 // we are no scrolling marginLeft = marginLeft + 74; //get new margin //do the slide new Effect.Morph(cat+'_slider', {style: 'margin-left:' + marginLeft + 'px;', duration: 0.5 }); //set scroll off once animation has finished FG_inScrollOff.delay(0.6); //update position FG_portfolio[cat].pos--; if (FG_portfolio[cat].pos == 0) { new Effect.Puff(cat+'_left_button', {duration: 0.5}); FG_autoScrollFlag = 0; } if ($(cat+'_right_button').style.display == 'none') { new Effect.Appear(cat+'_right_button', {duration: 0.5}); } } else { if (!auto) { new Effect.Pulsate(cat, {pulses: 1, from: 0.6, duration: 0.25}); } FG_autoScrollFlag = 0; FG_inScrollOff(); } } } else { if (!auto) { new Effect.Pulsate(cat, {pulses: 1, from: 0.6, duration: 0.25}); } FG_autoScrollFlag = 0; FG_inScrollOff(); } //if we are auto scrolling and autoscrolling si still allowable if (auto && FG_autoScrollFlag == 1) { FG_thumbsScroll.delay(1.0, cat, dir, 1); } } /** * Mouse over thumb */ function FG_highlightThumb(id) { new Effect.Morph(id, {style: 'width:70px; height:70px; margin:4px', duration: 0.15 }); } /** * Mouse out thumb */ function FG_unhighlightThumb(id) { new Effect.Morph(id, {style: 'width:60px; height:60px; margin:7px;', duration: 0.15 }); } /** * Mouse over category */ function FG_highlightCategory(cat) { if (FG_status == 'active') { var scrollLeft = cat + '_left'; var scrollRight = cat + '_right'; $('firegrid_heading').innerHTML = cat.toUpperCase().sub('_', ' '); $('firegrid_head').appear(); if (FG_catScrollLeft[cat]) { FG_catScrollLeft[cat].cancel(); } if (FG_catScrollRight[cat]) { FG_catScrollRight[cat].cancel(); } FG_catScrollLeft[cat] = new Effect.Morph(scrollLeft, {style: 'color:#CD1D1F;', duration: 0.25 }); FG_catScrollRight[cat] = new Effect.Morph(scrollRight, {style: 'color:#CD1D1F;', duration: 0.25 }); } } /** * Mouse out category */ function FG_unhighlightCategory(cat) { if (FG_status == 'active') { var scrollLeft = cat + '_left'; var scrollRight = cat + '_right'; if (FG_catScrollLeft[cat]) { FG_catScrollLeft[cat].cancel(); } if (FG_catScrollRight[cat]) { FG_catScrollRight[cat].cancel(); } FG_catScrollLeft[cat] = new Effect.Morph(scrollLeft, {style: 'color:#FFFFFF;', duration: 0.25 }); FG_catScrollRight[cat] = new Effect.Morph(scrollRight, {style: 'color:#FFFFFF;', duration: 0.25 }); } } /** * Get the previous image */ function FG_previousImage(imgID, cat, update) { if (update == null) { update = false; } var prevImg = ''; //previous image holder //get previous image id var prevImgIndex = FG_portfolio[cat].id.indexOf(imgID) - 1; //if it was the first then lets get the previous category if (prevImgIndex == -1) { var prevCatIndex = FG_categories.indexOf(cat) - 1; //if it was the first category then the image will be the last image of the last category if (prevCatIndex == -1) { cat = FG_categories.last(); prevImg = FG_portfolio[cat].img.last(); } else { //else the last image of the previous category cat = FG_categories[prevCatIndex]; prevImg = FG_portfolio[cat].img.last(); } //else the previous images of its own category } else { prevImg = FG_portfolio[cat].img[prevImgIndex]; } if (update) { FG_currentImage = FG_portfolio[cat].id[prevImgIndex]; FG_currentCategory = cat; } FG_prevTitle = FG_portfolio[cat].title[prevImgIndex]; FG_prevCategory = cat; return FG_imagePath+'/'+cat+'/'+prevImg; } /** * Get the next image */ function FG_nextImage(imgID, cat, update) { if (update == null) { update = false; } var nextImg = ''; //next image holder //get next image id var nextImgIndex = FG_portfolio[cat].id.indexOf(imgID) + 1; //if it was the last then lets get the next category if (nextImgIndex == FG_portfolio[cat].id.length) { var nextCatIndex = FG_categories.indexOf(cat) + 1; //if it was the last category then the image will be the first image of the first category if (nextCatIndex == FG_categories.length) { cat = FG_categories.first(); nextImg = FG_portfolio[cat].img.first(); } else { //else the first image of the next category cat = FG_categories[nextCatIndex]; nextImg = FG_portfolio[cat].img.first(); } FG_nextCategory = cat; //else the next images of its own category } else { nextImg = FG_portfolio[cat].img[nextImgIndex]; } if (update) { FG_currentImage = FG_portfolio[cat].id[nextImgIndex]; FG_currentCategory = cat; } FG_nextCategory = cat; FG_nextTitle = FG_portfolio[cat].title[nextImgIndex]; return FG_imagePath+'/'+cat+'/'+nextImg; } /** * Show the full size image on the thumbnail that was clicked */ function FG_showImage(img, cat) { //create previous image var prevImage = document.createElement('img'); prevImage.setAttribute('id','firegridimage_prev'); prevImage.src = FG_previousImage(img, cat); //prevImage.style.position = 'absolute'; //prevImage.style.marginLeft = '-430px'; var prevImageCont = document.createElement('div'); prevImageCont.setAttribute('id','firegridimage_prevCont'); prevImageCont.style.marginLeft = '-490px'; prevImageCont.style.position = 'relative'; document.getElementById('firegriddisplayshelf').appendChild(prevImageCont); document.getElementById('firegridimage_prevCont').appendChild(prevImage); //create full size image var objImage = document.createElement('img'); var imgIndex = FG_portfolio[cat].id.indexOf(img); objImage.setAttribute('id','firegridimage'); objImage.src = FG_imagePath+'/'+cat+'/'+FG_portfolio[cat].img[imgIndex]; var objImageCont = document.createElement('div'); objImageCont.setAttribute('id','firegridimageCont'); objImageCont.style.position = 'relative'; document.getElementById('firegriddisplayshelf').appendChild(objImageCont); document.getElementById('firegridimageCont').appendChild(objImage); FG_updateTitle(FG_portfolio[cat].title[imgIndex]); //create next image var nextImage = document.createElement('img'); nextImage.setAttribute('id','firegridimage_next'); nextImage.src = FG_nextImage(img, cat); nextImage.alt = FG_portfolio[cat].title[FG_portfolio[cat].id.indexOf(nextImage.src)]; var nextImageCont = document.createElement('div'); nextImageCont.setAttribute('id','firegridimage_nextCont'); nextImageCont.style.position = 'relative'; document.getElementById('firegriddisplayshelf').appendChild(nextImageCont); document.getElementById('firegridimage_nextCont').appendChild(nextImage); //insert images into document //document.getElementById('firegriddisplayshelf').appendChild(objImageCont); //document.getElementById('firegriddisplayshelf').appendChild(prevImageCont); // document.getElementById('firegriddisplayshelf').appendChild(nextImageCont); FG_currentImage = img; FG_currentCategory = cat; $('showcasetype').innerHTML = FG_currentCategory.sub('_', ' '); fadeIn(); } function FG_updateTitle(title) { $('showcasetitle').innerHTML = title; $('showcasetitle').appear(); } /** * Does the full size image fade in effect. Effect is set by FG_transition * */ function fadeIn() { $('firegridcontrols').appear({duration:0.5, delay:0.5}); if (FG_displayTransition != null) { FG_displayTransition.cancel(); } if (FG_categoriesTransition != null) { FG_categoriesTransition.cancel(); } switch(FG_transition) { case 'standard': FG_categoriesTransition = new Effect.Fade('firegridcategories'); FG_displayTransition = new Effect.Appear('firegriddisplay'); break; case 'random': FG_thumbsFade(1.0); FG_displayTransition = new Effect.Appear('firegriddisplay', {duration: 1.0, delay: 0.5 }); break; case 'down': new Effect.Appear('firegriddisplay', {duration: 1.0, delay: 0.5 }); FG_categories.each( function(s) { var catIndex = FG_categories.indexOf(s); var delayTime = 0.1*catIndex; new Effect.Fade(s+'_wrapper', {duration: 1.0, delay: delayTime }); }); break; case 'up': alert('This is still buggy and needs to be fixed - stick to other transitions for now.'); var reverseCat = FG_categories.reverse(false); FG_displayTransition = new Effect.Appear('firegriddisplay', {duration: 1.0, delay: 0.5 }); reverseCat.each( function(s) { var catIndex = reverseCat.indexOf(s); var delayTime = 0.1*catIndex; new Effect.Fade(s+'_wrapper', {duration: 1.0, delay: delayTime }); }); break; } } /** * Does the full size image fade out effect. Effect is set by FG_transition * */ function fadeOut() { if (FG_displayTransition != null) { FG_displayTransition.cancel(); } if (FG_categoriesTransition != null) { FG_categoriesTransition.cancel(); } switch(FG_transition) { case 'standard': FG_displayTransition = new Effect.Fade('firegriddisplay', {delay:0.25}); FG_categoriesTransition = new Effect.Appear('firegridcategories', {delay:0.25}); break; case 'random': FG_displayTransition = new Effect.Fade('firegriddisplay', {duration: 1.0, delay: 0.5 }); FG_thumbsAppear(1.0); break; case 'down': FG_displayTransition = new Effect.Fade('firegriddisplay', {duration: 1.0, delay: 0.5 }); FG_categories.each( function(s) { var catIndex = FG_categories.indexOf(s); var delayTime = 0.1*catIndex; new Effect.Appear(s+'_wrapper', {duration: 1.0, delay: delayTime }); }); break; case 'up': alert('This is still buggy and needs to be fixed - stick to other transitions for now.'); var reverseCat = FG_categories.reverse(false); FG_displayTransition = new Effect.Fade('firegriddisplay', {duration: 1.0, delay: 0.5 }); reverseCat.each( function(s) { var catIndex = reverseCat.indexOf(s); var delayTime = 0.1*catIndex; new Effect.Appear(s+'_wrapper', {duration: 1.0, delay: delayTime }); }); break; } } /** * Removes the image the was created to be displayed */ function FG_removeImage() { $('firegridimage').remove(); $('firegridimage_prev').remove(); $('firegridimage_next').remove(); $('firegridimageCont').remove(); $('firegridimage_prevCont').remove(); $('firegridimage_nextCont').remove(); } /** * Displays the firegrid - this is only called when user is viewing a full size image */ function FG_grid() { $('firegridcontrols').fade({duration:1.0}); FG_removeImage.delay(1.5); fadeOut.delay(0.5); } function FG_inSlideOff() { FG_inSlide = 0; } function FG_updateImageIds(oldid, newid) { $(oldid).setAttribute('id',newid); } function FG_setCurrentFromImg() { var src = $('firegridimage').src; src = src.sub('http://', ''); src = src.sub(FG_host, ''); src = src.sub(FG_imagePath, ''); src = src.sub('/', ''); var segments = src.split("/"); FG_currentCategory = segments[0]; imgIndex = FG_portfolio[FG_currentCategory].img.indexOf(segments[1]); FG_currentImage = FG_portfolio[FG_currentCategory].id[imgIndex]; // alert(FG_currentImage+'-'+FG_currentCategory); } function FG_createNextImage() { $('firegridimage_prev').remove(); $('firegridimage_prevCont').remove(); //create next image var nextImage = document.createElement('img'); nextImage.setAttribute('id','firegridimage_next'); nextImage.src = FG_nextImage(FG_currentImage, FG_currentCategory); var nextImageCont = document.createElement('div'); nextImageCont.setAttribute('id','firegridimage_nextCont'); document.getElementById('firegriddisplayshelf').appendChild(nextImageCont); document.getElementById('firegridimage_nextCont').appendChild(nextImage); } function FG_createPreviousImage() { //create prev image var prevImage = document.createElement('img'); prevImage.setAttribute('id','firegridimage_prev'); prevImage.src = FG_previousImage(FG_currentImage, FG_currentCategory); var prevImageCont = document.createElement('div'); prevImageCont.setAttribute('id','firegridimage_prevCont'); prevImageCont.style.marginLeft = '-480px'; document.getElementById('firegriddisplayshelf').insertBefore(prevImageCont, $('firegridimageCont')); document.getElementById('firegridimage_prevCont').appendChild(prevImage); } function FG_next() { if (FG_inSlide == 0) { FG_inSlide = 1; new Effect.Morph('firegridimageCont', {style: 'margin-left:-490px;', duration: 0.7 }); FG_updateImageIds.delay(0.8, 'firegridimageCont', 'firegridimage_prevCont'); FG_updateImageIds.delay(0.8, 'firegridimage', 'firegridimage_prev'); FG_updateImageIds.delay(0.9, 'firegridimage_nextCont', 'firegridimageCont'); FG_updateImageIds.delay(0.9, 'firegridimage_next', 'firegridimage'); FG_setCurrentFromImg.delay(1.0); FG_createNextImage.delay(1.1); FG_inSlideOff.delay(1.2); FG_prevCategory = $('showcasetype').innerHTML.sub(' ', '_'); $('showcasetype').innerHTML = FG_nextCategory.sub('_', ' '); FG_prevTitle = $('showcasetitle').innerHTML; FG_updateTitle(FG_nextTitle); } } function FG_previous() { if (FG_inSlide == 0) { FG_inSlide = 1; $('firegridimage_next').remove(); $('firegridimage_nextCont').remove(); new Effect.Morph('firegridimage_prevCont', {style: 'margin-left:-10px;', duration: 0.7 }); FG_updateImageIds.delay(0.8, 'firegridimageCont', 'firegridimage_nextCont'); FG_updateImageIds.delay(0.8, 'firegridimage', 'firegridimage_next'); FG_updateImageIds.delay(0.9, 'firegridimage_prevCont', 'firegridimageCont'); FG_updateImageIds.delay(0.9, 'firegridimage_prev', 'firegridimage'); FG_setCurrentFromImg.delay(1.0); FG_createPreviousImage.delay(1.1); FG_inSlideOff.delay(1.2); FG_nextCategory = $('showcasetype').innerHTML.sub(' ', '_'); $('showcasetype').innerHTML = FG_prevCategory.sub('_', ' '); FG_nextTitle = $('showcasetitle').innerHTML; FG_updateTitle(FG_prevTitle); } } /* if (document.delay) { FG_init.delay(0.5); } else { alert('No Prototype detected'); document.write('