var references = {
    'aquarius-aqua': {
        'title':    'Aquarius címketervek (2007)',
        'procurer': 'Aquarius Aqua',
        'text':     'Aquarius ásványvizes palack cimke-kreatívjainak elkészítése és legyártása. Megjelent Dániában.',
        'samples':  6,
    },
    
    'asvanyviz-kft': {
        'title':    'Neqtar (2008)',
        'procurer': 'Ásványvíz Kft.',
        'text':     'Neqtar kreatív elkészítése, kiadványok tervezése, gyártása.',
        'samples':  6,
    },
    
    'bayer-healthcare': {
        'title':    'Nexavar kreatív (2006)',
        'procurer': 'Bayer HealthCare',
        'text':     'Arculati elemek feldolgozásával megvalósítottunk szóróanyagokat, kiadványokat, plakátot, mappát, egyéb grafikai munkákat, kiállítási grafikákat. Látható 3D tervezés, továbbá kimagasló sikert értünk el a daganatellenes és immunmoduláns gyógyszerszedők területén.',
        'samples':  17,
    },
    
    'borfesztival': {
        'title':    'Borfesztivál (2008)',
        'procurer': 'Borkultúra Kft.',
        'text':     'Bor és Pezsgőfesztivál teljes arculattervezése, kreatívok elkészítése, logotypia, kiadványok, szóróanyagok, kiegészitő elemek tervezése és legyártása. Megjelenés a Budai várban. Vinagora arculatának tervezése, kapcsolodó anyagok elkészítése.',
        'samples':  16,
    },
    
    'budafokvin': {
        'title':    'BudafokVin (2007)',
        'procurer': 'BudafokVin',
        'text':     'Borcímkék grafikai tervezése, arculat kialakítások, címkék legyártása, aranyozás, ezüstözés.',
        'samples':  15,
    },
    
    'bugana': {
        'title':    'Bugana (2008)',
        'procurer': 'Budakeszi Önkormányzat',
        'text':     'A Bugana fesztivál teljes arculatának elkészítése, kiadványok, plakátok tervezése és kivitelezése.',
        'samples':  10,
    },
    
    'csipkehaz': {
        'title':    'Csipkeház',
        'procurer': 'Révész Márta',
        'text':     'Magyarország egyik legelismertebb csipkekészítő művészének teljes reklámanyagának elkészítése, logotypia, website, kiadványok… [<a href="http://csipkehaz.hu">http://csipkehaz.hu</a>]',
        'samples':  4,
    },
    
    'euronics': {
        'title':    'Euronics, Nehagyjaki.hu (2009)',
        'procurer': 'Euronics',
        'text':     'Szórólapok, kiadványok, 3D figurák, website reklámok, bannerek tervezése, legyártása.',
        'samples':  9,
    },    

    'gyermekelet-alapitvany': {
        'title':    'Gyermekélet Alapítvány (2009)',
        'procurer': 'Gyermekélet Alapítvány',
        'text':     'Arculattervezés, borítékok, DM levelek, website elkészítése. Kapcsolodó anyagok tervezése. [<a href="http://gyermekelet.hu">http://gyermekelet.hu</a>]',
        'samples':  10,
    },

    'htm': {
        'title':    'HTM (2009)',
        'procurer': 'HTM Kft.',
        'text':     'Arculattervezés, website elkészítése. Kapcsolodó anyagok tervezése. [<a href="http://htm.hu">http://htm.hu</a>]',
        'samples':  4,
    },

    'janssen-cilag': {
        'title':    'Janssen Cilag (2008)',
        'procurer': 'Janssen Cilag',
        'text':     'Rendezvény megjelenés, kiadványok tervezése, legyártása, visszaszámláló levél tervezése, legyártása.',
        'samples':  8,
    },

    'mag': {
        'title':    'MAG (2009)',
        'procurer': 'MAG',
        'text':     'Ciced konferencia teljes arculattervezése, megjelenítése. Logotypia, kiadványok, füzetek, roll-up, sajtófal, információs totemoszlopok, toll, mappa, oklevél, meghívó, boríték, egyéb kiegészítők… Fotózás, videóvágás, felvételek. Mag honvédelmi nap arculatának és az egész rendezvény elemeinek tervezése és legyártása a tököli reptéren.',
        'samples':  26,
    },

    'magyar-plastiroute': {
        'title':    'Magyar Plastiroute (2009)',
        'procurer': 'Magyar Plastiroute Kft.',
        'text':     'Website elkészítése, kapcsolodó arculattervezés, fotózás, intró elkészítése. [<a href="http://magyarplastiroute.hu">http://magyarplastiroute.hu</a>, <a href="http://fout-vonal.hu">http://fout-vonal.hu</a>]',
        'samples':  5,
    },

    'mauricio-flores': {
        'title':    'Mauricio Flores (2009)',
        'procurer': 'Mauricio Flores',
        'text':     'Az egyik legelismertebb belsőépítész honlapjának és arculatának tervezése. [<a href="http://muricioflores.hu">http://mauricioflores.hu</a>]',
        'samples':  2,
    },

    'napfeny-park': {
        'title':    'Napfény Park (2009)',
        'procurer': 'Napfény Park',
        'text':     'A szegedi Napfény Park teljeskörű arculatánat tervezése, dekorációk, kiadványok, mappák, szóróanyagok, újságmegjelenések stb.',
        'samples':  15,
    },

    'opel': {
        'title':    'Opel Danubia (2009)',
        'procurer': 'Opel Danubia',
        'text':     'Autóház arculatának megtervezése, kapcsolodó anyagok elkészítése, kiadványok, szórólapok, dekorációk, táblák, autómatricázások…',
        'samples':  7,
    },

    'polinesia-utazas': {
        'title':    'Polinézia Utazás (2009)',
        'procurer': 'Polinézia Utazás',
        'text':     'A cég arculatának megtervezése, kapcsolodó anyagok elkészítése, kiadványok, szórólapok, rendezvény megjelenések, webdesign keresőoptimalizálással… [<a href="http://polinezia-utazas.hu">http://polineziautazas.hu</a>]',
        'samples':  8,
    },

    'portico-investments': {
        'title':    'Portico Investments (2009)',
        'procurer': 'Portico Investments',
        'text':     'A cég arculatának megjelenítése, kiadványok, molinók, egyéb elemek tervezése, legyártása.',
        'samples':  7,
    },

    'protektron': {
        'title':    'Protektron (2009)',
        'procurer': 'Protektron',
        'text':     'A cég komplett arculatának megjelenítése, kiadványok, névjegykártyák, szóróanyagok, mappák, website tervezése, kivitelezése. [<a href="http://protektron.hu">http://protektron.hu</a>]',
        'samples':  13,
    },

    'sbe': {
        'title':    'SBE (2009)',
        'procurer': 'SBE',
        'text':     'A cég komplett arculatának megjelenítése, kiadványok, névjegykártyák, szóróanyagok, mappák, website tervezése, kivitelezése.',
        'samples':  13,
    },

    'schering': {
        'title':    'Schering (2009)',
        'procurer': 'Schering',
        'text':     'Androcur, Myeloma Multiplex, Bonefos, Onkológia Klub grafikai tervezése, arculati elemek elkészítése, kiadványok, kiegészítő anyagok tervezése és legyártása.',
        'samples':  15,
    },

    'semiramis-cafe-zenit': {
        'title':    'Semiramis, Café Zenit (2004)',
        'procurer': 'Semiramis, Café Zenit',
        'text':     'Arculattervezés, logotypia, kiadványok, szóróanyagok és egyéb kiegészitők grafikai munkái, gyártása.',
        'samples':  8,
    },

    'sunny-world': {
        'title':    'Sunny World (2009)',
        'procurer': 'Sunny World',
        'text':     'Arculat megjelenés, újság tördelése, szerkesztése, garfikai elemek elkészítése, az újság legyártása.',
        'samples':  13,
    },
    
    'sylvie-and-alida': {
        'title':    'Sylvie and Alida (2009)',
        'procurer': 'Sylvie and Alida',
        'text':     'Az esküvőszervező cég arculat tervezése, kiadványok, névjegykártyák, hírdetések, website, szórólapok megjelenítése, kapcsolodó elemek elkészítése. [<a href="http://eljegyzestoleskuvoig.hu">http://eljegyzestoleskuvoig.hu</a>]',
        'samples':  10,
    },
    
    'szef': {
        'title':    'SZEF (2009)',
        'procurer': 'Szakszervezetek Együttműködési Fóruma',
        'text':     'Látványvilág, arculat kialakítása, egy új struktúra felépítése, website és kapcsolodó elemek elkészítése, legyártása. [<a href="http://szef.hu">http://szef.hu</a>]',
        'samples':  7,
    },

    'targo-promotion': {
        'title':    'Targo Promotion (2007–2009)',
        'procurer': 'Targo Promotion',
        'text':     'Promóciós tárgyak tervezése és gyártása.',
        'samples':  36,
    },

    'ultrabalaton': {
        'title':    'Ultrabalaton (2009)',
        'procurer': 'Ultrabalaton',
        'text':     'A cég arculatának megjelenítése, újítása a website-on, kapcsolodó anyagok elkészítése. [<a href="http://ultrabalaton.hu">http://ultrabalaton.hu</a>]',
        'samples':  3,
    },
    
    'viaventura': {
        'title':    'Viaventura (2008)',
        'procurer': 'Viaventura',
        'text':     'A cég arculatának tervezése, website elkészítése, kapcsolodó elemek gyártása. [<a href="http://viaventura.hu">http://viaventura.hu</a>]',
        'samples':  4,
    },
}

$(document).ready(function () {
    $('#reference-list').after(
        '<div id="reference-samples">\
			<div></div>\
		</div>\
		<div id="reference-details">\
			<h3 id="reference-title"></h3>\
			<p>Megrendelő: <span id="reference-procurer"></span></p>\
			<p id="reference-text"></p>\
			<p>\
				<span id="reference-back">〈</span>\
				<span id="reference-current"></span> ⁄ <span id="reference-total"></span>\
				<span id="reference-forward">〉</span>\
			</p>\
		</div>'
	);
    
    $(window).resize(function () {
        $('#reference-samples').css('width', $(document).width() / 2 + 99);
    });
    
    $(window).resize();
    
    $('#reference-list > li').click(function () {
        $('#reference-list > li').removeClass('active');
        $(this).addClass('active');
        $('#reference-title').text(references[this.id].title);
        $('#reference-procurer').text(references[this.id].procurer);        
        $('#reference-text').html(references[this.id].text);
        
        var number = references[this.id].samples;
        $('#reference-total').text((number < 10 ? '0' : '') + number);
        
        var container = $('#reference-samples > div');
        container.empty();
        container.css('margin-left', '0px')
        
        for (var i = 1; i <= number; i++) {
            container.append('<img src="images/references/' + this.id + '/' + i + '.jpg" />');
        }
        
        var images = $('#reference-samples > div > img');
        
        images.click(function () {
            images.removeClass('active');
            $(this).addClass('active');
            
            container.animate({'margin-left': '-' + $(this).position().left + 'px'}, 500);
            
            for (var j = 1; j < number; j++) {
                if (images.toArray()[j - 1] == this) {
                    break;
                }
            }
            
            $('#reference-current').text((j < 10 ? '0' : '') + j);
        });
        
        $('#reference-samples > div > img:first-child').click();
    });
    
    $('#reference-forward').click(function () {
        $('#reference-samples > div > img.active').next().click();
    });
    
    $('#reference-back').click(function () {
        $('#reference-samples > div > img.active').prev().click();
    });
    
    $('#reference-list > li:first-child').click();
});