// Main code for the portfolio // // Authors: // Ricardo Fabbri (rfabbri at lems dot brown dot no5pam dot edu) // Angela Guzman (angelita.guzman at gmail dot no5spam dot com) // // ------------------------------------------------------------------- // Variables // ------------------------------------------------------------------- var project_hash_id = new Array( "#colorbook", "#heroes", "#color-2", "#color-study", "#stamps", "#synestesia", "#legos", "#st-photos", "#logo", "#stationary", "#st-animation", "#da-vinci", "#typeIbook", "#typeIIbook", "#sprinter-posters", "#olympic-posters", "#artist-book", "#rotations", "#frisket", "#shapes", "#type-collage", "#bible", "#timeline", "#pies", "#cube-calendar", "#photograms", "#alphabet", "#colombianita", "#pillow", "#calvino", "#postcards", "#plates-part-1", "#plates-part-2", "#plates-part-3", "#expressive", "#expressive-part-2", "#letterpress", "#booklet-cover", "#forknknife", "#general-mills", "#pitcher", "#cupnsaucer", "#kartell", "#wood", "#metal", "#plastic", "#rendering", "#three-dee-printing", "#sketch-ex1", "#sketch-ex2", "#sketch-ex3", "#lamp", "#popcorn", "#eggdrop", "#mask", "#purifier", "#people", "#animals", "#city", "#other-charcoal", "#tinfoil", "#fish", "#plant", "#manatee", "#camouflage", "#bw", "#animal", "#journey", "#workplace", "#outdoor-class", "#banners-intern", "#banners-intern-part-2", "#moas-tshirts", "#cad-drawing", "#paintchip-flowers", "#tropical-signage", "#digital", "#form" ); var is_there_a_selected_toplevel_li = false; var selected_toplevel_li = 1; var selected_secondlevel_li = 1; var selected_thirdlevel_li = 1; var selected_project_view = 1; var selected_project_nviews = 1; var selected_project_id = location.hash; var visible_secondlevel_ul_id = "graphic_design_project_groups"; var visible_thirdlevel_ul_id = "posters_projects"; var menu_idx = new Array(); // position of each item in their menu menu_idx["graphic_design"] = 0; menu_idx["industrial_design"] = 1; menu_idx["other_design"] = 2; menu_idx["drawing_and_painting"] = 3; // Graphic design menu_idx["typography-I"] = 0; menu_idx["typography-II"] = 1; menu_idx["stationary"] = 2; menu_idx["books"] = 3; menu_idx["collages"] = 4; menu_idx["history"] = 5; menu_idx["posters"] = 6; menu_idx["patterns"] = 7; menu_idx["photos"] = 8; menu_idx["silkscreening"] = 9; // Industrial design menu_idx["packaging"] = 0; menu_idx["ceramics"] = 1; menu_idx["modelmaking"] = 2; menu_idx["cad"] = 3; menu_idx["sketches"] = 4; menu_idx["early"] = 5; // Drawing + Painting menu_idx["charcoal"] = 0; menu_idx["pencil"] = 1; menu_idx["acrylic"] = 2; menu_idx["watercolor"] = 3; menu_idx["guache"] = 4; menu_idx["collage"] = 5; // Other design menu_idx["interior"] = 0; menu_idx["landscape"] = 1; menu_idx["internships"] = 2; menu_idx["extra"] = 3; menu_idx["#colorbook"] = 0; menu_idx["#da-vinci"] = 1; menu_idx["#typeIbook"] = 2; menu_idx["#typeIIbook"] = 3; menu_idx["#heroes"] = 4; menu_idx["#color-2"] = 5; menu_idx["#color-study"] = 6; menu_idx["#legos"] = 7; menu_idx["#stamps"] = 8; menu_idx["#synestesia"] = 9; menu_idx["#logo"] = 0; menu_idx["#stationary"] = 1; menu_idx["#st-photos"] = 2; menu_idx["#st-animation"] = 3; menu_idx["#sprinter-posters"] = 0; menu_idx["#olympic-posters"] = 1; menu_idx["#artist-book"] = 2; menu_idx["#rotations"] = 0; menu_idx["#frisket"] = 1; menu_idx["#shapes"] = 2; menu_idx["#type-collage"] = 0; menu_idx["#digital"] = 1; menu_idx["#form"] = 2; menu_idx["#bible"] = 0; menu_idx["#timeline"] = 0; menu_idx["#pies"] = 0; menu_idx["#photograms"] = 0; menu_idx["#alphabet"] = 1; menu_idx["#colombianita"] = 0; menu_idx["#pillow"] = 1; menu_idx["#calvino"] = 0; menu_idx["#postcards"] = 1; menu_idx["#plates-part-1"] = 2; menu_idx["#plates-part-2"] = 3; menu_idx["#plates-part-3"] = 4; menu_idx["#expressive"] = 0; menu_idx["#expressive-part-2"] = 1; menu_idx["#booklet-cover"] = 2; menu_idx["#letterpress"] = 3; menu_idx["#cube-calendar"] = 0; menu_idx["#forknknife"] = 1; menu_idx["#general-mills"] = 2; menu_idx["#pitcher"] = 0; menu_idx["#cupnsaucer"] = 1; menu_idx["#kartell"] = 2; menu_idx["#wood"] = 0; menu_idx["#plastic"] = 1; menu_idx["#metal"] = 2; menu_idx["#rendering"] = 0; menu_idx["#three-dee-printing"] = 1; menu_idx["#sketch-ex1"] = 0; //menu_idx["#sketch-ex2"] = 1; menu_idx["#sketch-ex3"] = 1; menu_idx["#lamp"] = 0; menu_idx["#eggdrop"] = 1; menu_idx["#mask"] = 2; menu_idx["#popcorn"] = 3; menu_idx["#purifier"] = 4; menu_idx["#people"] = 0; menu_idx["#animals"] = 1; menu_idx["#city"] = 2; menu_idx["#other-charcoal"] = 3; menu_idx["#tinfoil"] = 0; menu_idx["#camouflage"] = 0; menu_idx["#bw"] = 0; menu_idx["#fish"] = 0; menu_idx["#plant"] = 1; menu_idx["#manatee"] = 0; menu_idx["#animal"] = 0; menu_idx["#journey"] = 1; menu_idx["#workplace"] = 2; menu_idx["#outdoor-class"] = 0; menu_idx["#banners-intern"] = 0; menu_idx["#banners-intern-part-2"] = 1; menu_idx["#cad-drawing"] = 2; menu_idx["#moas-tshirts"] = 3; menu_idx["#paintchip-flowers"] = 0; menu_idx["#tropical-signage"] = 1; var top_category = new Array(); var second_category = new Array(); // Da vinci project selects first toplevel menu option, which is graphic // design, and first second-level menu option, which is books top_category["#da-vinci"] = "graphic_design"; second_category["#da-vinci"] = "books"; top_category["#colorbook"] = "graphic_design"; second_category["#colorbook"] = "books"; top_category["#typeIbook"] = "graphic_design" ; second_category["#typeIbook"] = "books"; top_category["#typeIIbook"] = "graphic_design" ; second_category["#typeIIbook"] = "books" ; top_category["#heroes"] = "graphic_design" ; second_category["#heroes"] = "books" ; top_category["#color-2"] = "graphic_design" ; second_category["#color-2"] = "books" ; top_category["#color-study"] = "graphic_design" ; second_category["#color-study"] = "books" ; top_category["#legos"] = "graphic_design" ; second_category["#legos"] = "books" ; top_category["#stamps"] = "graphic_design" ; second_category["#stamps"] = "books" ; top_category["#synestesia"] = "graphic_design" ; second_category["#synestesia"] = "books" ; top_category["#logo"] = "graphic_design"; second_category["#logo"] = "stationary"; top_category["#stationary"] = "graphic_design"; second_category["#stationary"] = "stationary"; top_category["#st-photos"] = "graphic_design"; second_category["#st-photos"] = "stationary"; top_category["#st-animation"] = "graphic_design"; second_category["#st-animation"] = "stationary"; top_category["#sprinter-posters"] = "graphic_design"; second_category["#sprinter-posters"] = "posters"; top_category["#olympic-posters"] = "graphic_design"; second_category["#olympic-posters"] = "posters"; top_category["#artist-book"] = "graphic_design"; second_category["#artist-book"] = "posters"; top_category["#rotations"] = "graphic_design"; second_category["#rotations"] = "patterns"; top_category["#frisket"] = "graphic_design"; second_category["#frisket"] = "patterns"; top_category["#shapes"] = "graphic_design"; second_category["#shapes"] = "patterns"; top_category["#type-collage"] = "graphic_design"; second_category["#type-collage"] = "collages"; top_category["#digital"] = "graphic_design"; second_category["#digital"] = "collages"; top_category["#form"] = "graphic_design"; second_category["#form"] = "collages"; top_category["#timeline"] = "graphic_design"; second_category["#timeline"] = "history"; top_category["#bible"] = "graphic_design"; second_category["#bible"] = "history"; top_category["#photograms"] = "graphic_design"; second_category["#photograms"] = "photos"; top_category["#alphabet"] = "graphic_design"; second_category["#alphabet"] = "photos"; top_category["#colombianita"] = "graphic_design"; second_category["#colombianita"] = "silkscreening"; top_category["#pillow"] = "graphic_design"; second_category["#pillow"] = "silkscreening"; top_category["#calvino"] = "graphic_design"; second_category["#calvino"] = "typography-II"; top_category["#postcards"] = "graphic_design"; second_category["#postcards"] = "typography-II"; top_category["#expressive"] = "graphic_design"; second_category["#expressive"] = "typography-I"; top_category["#expressive-part-2"] = "graphic_design"; second_category["#expressive-part-2"] = "typography-I"; top_category["#letterpress"] = "graphic_design"; second_category["#letterpress"] = "typography-I"; top_category["#booklet-cover"] = "graphic_design"; second_category["#booklet-cover"] = "typography-I"; top_category["#plates-part-1"] = "graphic_design"; second_category["#plates-part-1"] = "typography-II"; top_category["#plates-part-2"] = "graphic_design"; second_category["#plates-part-2"] = "typography-II"; top_category["#plates-part-3"] = "graphic_design"; second_category["#plates-part-3"] = "typography-II"; // industrial_design top_category["#cube-calendar"] = "industrial_design"; second_category["#cube-calendar"] = "packaging"; top_category["#forknknife"] = "industrial_design"; second_category["#forknknife"] = "packaging"; top_category["#general-mills"] = "industrial_design"; second_category["#general-mills"] = "packaging"; top_category["#pitcher"] = "industrial_design"; second_category["#pitcher"] = "ceramics"; top_category["#cupnsaucer"] = "industrial_design"; second_category["#cupnsaucer"] = "ceramics"; top_category["#kartell"] = "industrial_design"; second_category["#kartell"] = "ceramics"; top_category["#wood"] = "industrial_design"; second_category["#wood"] = "modelmaking"; top_category["#metal"] = "industrial_design"; second_category["#metal"] = "modelmaking"; top_category["#plastic"] = "industrial_design"; second_category["#plastic"] = "modelmaking"; top_category["#rendering"] = "industrial_design"; second_category["#rendering"] = "cad"; top_category["#three-dee-printing"] = "industrial_design"; second_category["#three-dee-printing"] = "cad"; top_category["#sketch-ex1"] = "industrial_design"; second_category["#sketch-ex1"] = "sketches"; top_category["#sketch-ex2"] = "industrial_design"; second_category["#sketch-ex2"] = "sketches"; top_category["#sketch-ex3"] = "industrial_design"; second_category["#sketch-ex3"] = "sketches"; top_category["#lamp"] = "industrial_design"; second_category["#lamp"] = "early"; top_category["#eggdrop"] = "industrial_design"; second_category["#eggdrop"] = "early"; top_category["#mask"] = "industrial_design"; second_category["#mask"] = "early"; top_category["#popcorn"] = "industrial_design"; second_category["#popcorn"] = "early"; top_category["#purifier"] = "industrial_design"; second_category["#purifier"] = "early"; top_category["#candle"] = "industrial_design"; second_category["#candle"] = "early"; // drawing_and_painting top_category["#people"] = "drawing_and_painting"; second_category["#people"] = "charcoal"; top_category["#animals"] = "drawing_and_painting"; second_category["#animals"] = "charcoal"; top_category["#city"] = "drawing_and_painting"; second_category["#city"] = "charcoal"; top_category["#other-charcoal"] = "drawing_and_painting"; second_category["#other-charcoal"] = "charcoal"; top_category["#camouflage"] = "drawing_and_painting"; second_category["#camouflage"] = "guache"; top_category["#bw"] = "drawing_and_painting"; second_category["#bw"] = "collage"; top_category["#manatee"] = "drawing_and_painting"; second_category["#manatee"] = "watercolor"; top_category["#tinfoil"] = "drawing_and_painting"; second_category["#tinfoil"] = "pencil"; top_category["#fish"] = "drawing_and_painting"; second_category["#fish"] = "acrylic"; top_category["#plant"] = "drawing_and_painting"; second_category["#plant"] = "acrylic"; top_category["#animal"] = "other_design"; second_category["#animal"] = "interior"; top_category["#journey"] = "other_design"; second_category["#journey"] = "interior"; top_category["#workplace"] = "other_design"; second_category["#workplace"] = "interior"; top_category["#outdoor-class"] = "other_design"; second_category["#outdoor-class"] = "landscape"; top_category["#banners-intern"] = "other_design"; second_category["#banners-intern"] = "internships"; top_category["#banners-intern-part-2"] = "other_design"; second_category["#banners-intern-part-2"] = "internships"; top_category["#moas-tshirts"] = "other_design"; second_category["#moas-tshirts"] = "internships"; top_category["#cad-drawing"] = "other_design"; second_category["#cad-drawing"] = "internships"; top_category["#paintchip-flowers"] = "other_design"; second_category["#paintchip-flowers"] = "extra"; top_category["#tropical-signage"] = "other_design"; second_category["#tropical-signage"] = "extra"; var top_selected_idx = new Array(); var second_selected_idx = new Array(); var third_selected_idx = new Array(); for (prj in project_hash_id) { top_selected_idx[project_hash_id[prj]] = menu_idx[top_category[project_hash_id[prj]]]; second_selected_idx[project_hash_id[prj]] = menu_idx[second_category[project_hash_id[prj]]]; third_selected_idx[project_hash_id[prj]] = menu_idx[project_hash_id[prj]]; } // ------------------------------------------------------------------- function portfolio_check_project_url() { var invalid_id = true; for (prj in project_hash_id) { if (project_hash_id[prj] == location.hash) { invalid_id = false; } } if (invalid_id) { // invalid url // Display the default project document.getElementById("portfolio_image_showcase").style.display="none"; document.getElementById("portfolio_navigation").style.display="none"; document.getElementById("portfolio_project_description").style.display="none"; document.getElementById("error_message").style.display="block"; myurl=location.href; if (myurl.match("#")) { myurl=myurl.replace(/#.*/,"#da-vinci"); } else { myurl=myurl+"#da-vinci"; } location.replace(myurl); myurl=myurl+location.hash location.reload(); } else { // valid url set_project(location.hash); } } // ------------------------------------------------------------------------------ // A specific project view cannot be bookmarked as of now, only view 1 can // be bookmarked. function set_project_view(view_number) { // make the previous content disappear id_prefix = selected_project_id.slice(1); content_id = id_prefix + "-description-" + selected_project_view; previous_content = document.getElementById(content_id); previous_content.style.display = "none"; // show the old view number in "unselected" style var view_links_id_prv = id_prefix + "-links"; var view_p_prv = document.getElementById(view_links_id_prv); var view_a_prv = view_p_prv.getElementsByTagName("a"); view_a_prv[selected_project_view-1].className = "unselected"; // show the content id_prefix = location.hash.slice(1); content_id = id_prefix + "-description-" + view_number; selected_project_content = document.getElementById(content_id); selected_project_content.style.display = "block"; // show the appropriate image img_fname = "imgs/"+ id_prefix + "-image-" + view_number; img_elt = document.getElementById("project_image"); img_elt.src = img_fname+".png"; a_img = document.getElementById("big_image_link"); a_img.href = img_fname+"-big.png"; // show the new view number in "selected" style var view_links_id = id_prefix + "-links"; var view_p = document.getElementById(view_links_id); view_a = view_p.getElementsByTagName("a"); view_a[view_number-1].className = "selected"; selected_project_nviews = view_a.length; selected_project_view = view_number; selected_project_id = location.hash; if (Lightbox.updateImageList) { Lightbox.updateImageList(); } } // ------------------------------------------------------------------------------ function set_next_view() { if (selected_project_view < selected_project_nviews ) { set_project_view(selected_project_view + 1); } } function set_previous_view() { if (selected_project_view > 1) { set_project_view(selected_project_view - 1); } } // ------------------------------------------------------------------------------ function project_preload(id) { id_prefix = id.slice(1); image_collection = document.getElementById(id_prefix+"-links"); image_numbers = image_collection.getElementsByTagName("a"); for (i=1; i <= image_numbers.length; ++i) { image_fname = id_prefix + "-image-"+ i +".png"; myimage = new Image(); myimage.src = "imgs/"+image_fname; } } // ------------------------------------------------------------------------------ function set_project(id) { var menu_list_nav = document.getElementById("portfolio_navigation"); var menu_list = menu_list_nav.getElementsByTagName("ul"); var toplevel_li = menu_list[0].getElementsByTagName("li"); menu_list[0].style.display = "block"; var second_ul_id = top_category[id]+"_project_groups"; var secondlevel_ul = document.getElementById(second_ul_id); var visible_secondlevel_ul = document.getElementById(visible_secondlevel_ul_id); visible_secondlevel_ul.style.display = "none"; secondlevel_ul.style.display = "block"; visible_secondlevel_ul_id = second_ul_id; // get the second level ul for the current project. var secondlevel_li = secondlevel_ul.getElementsByTagName("li"); var ul_id = secondlevel_li[second_selected_idx[id]].firstChild.innerHTML+ "_projects"; var thirdlevel_ul = document.getElementById(ul_id); var thirdlevel_li = thirdlevel_ul.getElementsByTagName("li"); var visible_thirdlevel_ul = document.getElementById(visible_thirdlevel_ul_id); visible_thirdlevel_ul.style.display = "none"; thirdlevel_ul.style.display = "block"; // Undisplay previous visible_thirdlevel_ul_id = ul_id; // Unselect previous if (is_there_a_selected_toplevel_li) { selected_toplevel_li.className = "unselected"; selected_secondlevel_li.className = "unselected"; selected_thirdlevel_li.className = "unselected"; // prev_secondlevel_id = selected_secondlevel_li.firstChild.innerHTML + "_projects"; // document.getElementById(prev_secondlevel_id).style.display = "none"; } // mark e.g. graphic design option as selected selected_toplevel_li = toplevel_li[top_selected_idx[id]]; selected_toplevel_li.className = "selected"; is_there_a_selected_toplevel_li = true; // mark e.g. books as selected selected_secondlevel_li = secondlevel_li[second_selected_idx[id]]; selected_secondlevel_li.className = "selected"; // mark e.g. da Vinci as selected selected_thirdlevel_li = thirdlevel_li[third_selected_idx[id]]; selected_thirdlevel_li.className = "selected"; // make the previous number links disappear prv_id_prefix = location.hash.slice(1); links_id = prv_id_prefix + "-links"; document.getElementById(links_id).style.display = "none"; // make the new number links appear id_prefix = id.slice(1); links_id = id_prefix + "-links"; document.getElementById(links_id).style.display = "block"; // preload all images for the project project_preload(id); location.hash = id; // --- Now show the specific content for this project --- set_project_view(1); // default is to show first view }