bcm.addWindowOnload (setupGallery);


function setupGallery ()
{
    var strProjectID = null;
    var intFadeTimer = false;
    var intOpacity = 0;

    var objGallery = {
        'project_5':{'id':'5', 'title':'Music Bus', 'text':'                        <div id=\"top\">\n                            <p class=\"project_name\">Music Bus</p>\n\n                            <p>Web Content management systems (CMS) are often the backbone of a website. It\'s how you create, update and publish web pages, both copy and images. A CMS needs a user-friendly interface so, with basic training, anyone can update their website.</p>\n                        </div>\n\n<p><br /><a href=\"/content_management_systems.html\">Read more about our CMS solutions</a></p>\n\n\n                        <div id=\"services\">\n                            <p>Service Provided</p>\n                            <ul>\n                            <li>technical development</li>\n                            <li>email newsletter design</li>\n                            <li>email newsletter distribution management</li>\n                            <li>website hosting</li>\n                            <li>email hosting</li>\n                            </ul>\n                        </div>'},
        'project_1':{'id':'1', 'title':'Mums On Call', 'text':'                        <div id=\"top\">\n                            <p class=\"project_name\">Mums On Call</p>\n\n                            <p class=\"quote\">&quot;When I decided to go ahead, I was given a realistic timescale and the work was always delivered on time. The testing period before going live was worked on well and even though Blue Cube were busy with other projects, I always felt my job was given full attention....&quot;</p>\n<p><br /><a href=\"/mums_on_call_testimonial.html\">Read the full testimonial</a></p>\n                        </div>\n                        <div id=\"services\">\n                            <p>Service Provided</p>\n                            <ul>\n                                <li>technical development</li>\n<li>blog development</li>\n<li>customer admin panel</li>\n<li>website hosting</li>\n<li>email hosting</li>\n\n\n                            </ul>\n                        </div>'},
        'project_4':{'id':'4', 'title':'Energy Trust', 'text':'                        <div id=\"top\">\n                            <p class=\"project_name\">Energy Trust</p>\n\n                            <p class=\"quote\">&quot;One of our aims was to rank highly on Google\'s search results...Sure enough, two days after our site launched, it was already on page one for one of our search terms - NDEA training...&quot;</p>\n<p><br /><a href=\"/energy_trust_testimonial.html\">Read the full testimonial</a></p>\n\n                        </div>\n                        <div id=\"services\">\n                            <p>Service Provided</p>\n                            <ul>\n                                <li>website design</li>\n                                <li>technical development</li>\n                                <li>content management system</li>\n                                <li>SEO</li>\n                                <li>adwords campaign</li>\n                                <li>course booking module</li>\n                                <li>protx integration</li>\n                                <li>logo design</li>\n                                <li>corporate stationery</li>\n                                <li>website / email hosting</li>\n                            </ul>\n                        </div>'},
        'project_3':{'id':'3', 'title':'Hello Beads', 'text':'                        <div id=\"top\">\n                            <p class=\"project_name\">Hello Beads</p>\n\n                            <p>When it comes to providing an online shop and ecommerce systems, we don\'t offer a one-size-fits-all solution. For starters, some sites sell products whereas others sell services.</p>\n\n<p><br /><a href=\"/ecommerce_systems.html\">Read more about our e-commerce solutions</a></p>\n                        </div>\n                        <div id=\"services\">\n                            <p>Service Provided</p>\n                            <ul>\n                                <li>technical development</li>\n                                <li>e-commerce development</li>\n                                <li>website hosting</li>\n                                <li>email hosting</li>\n                            </ul>\n                        </div>'},
        'project_2':{'id':'2', 'title':'Best Lettings', 'text':'                        <div id=\"top\">\n                            <p class=\"project_name\">Best Lettings</p>\n\n                            <p class=\"quote\">&quot;As estate agents, our list of properties is ever changing so we needed a backoffice admin area that would allow us to easily add and remove properties when needed...I got everything I wanted from a website...and more.&quot;</p>\n<p><br /><a href=\"/best_lettings_testimonial.html\">Read the full testimonial</a></p>\n                        </div>\n                        <div id=\"services\">\n                            <p>Service Provided</p>\n                            <ul>\n                                <li>website design</li>\n                                <li>technical development</li>\n                                <li>content management system</li>\n                                <li>bespoke property listing module</li>\n                                <li>logo design</li>\n                                <li>corporate stationery</li>\n                                <li>website / email hosting</li>\n                            </ul>\n                        </div>'}
    };

    var objMainImageHolder = document.getElementById('featured_project_image');
    var objMainImage = new Image ();
    var objText = document.getElementById('featured_project_text');
    var arrThumbLinks = bcm.getLinksByRel ('thumb');

    objMainImage.src = '/img/featured_project/' + objGallery['project_2']['id'] + '.jpg';
    objMainImage.alt = objGallery['project_2']['title'];
    objMainImageHolder.appendChild (objMainImage);
    objText.innerHTML = objGallery['project_2']['text'];
    bcm.setElementOpacity (objMainImage, intOpacity);
    bcm.setElementOpacity (objText, intOpacity);
    intFadeTimer = setInterval (fadeIn, 1);


    for (var i in arrThumbLinks)
    {
        arrThumbLinks[i].onclick = function ()
        {
            if (intFadeTimer != false)
                return false;

            // display loading image
            strProjectID = 'project_' + this.id.split('_')[1];

            imgNew = new Image ();
            imgNew.onload = function ()
            {
                // clear loading image
                intFadeTimer = setInterval (fadeOut, 1);
            };
            imgNew.src = '/img/featured_project/' + objGallery[strProjectID]['id'] + '.jpg';

            return false;
        }
    }


    function fadeOut ()
    {
        if (intOpacity >= 0)
        {
            intOpacity -= 10;
            bcm.setElementOpacity (objMainImage, intOpacity);
            bcm.setElementOpacity (objText, intOpacity);
        }
        else
        {
            objMainImage.src = imgNew.src;
            objMainImage.alt = objGallery[strProjectID]['title'];
            objText.innerHTML = objGallery[strProjectID]['text'];

            clearInterval (intFadeTimer);
            intFadeTimer = setInterval (fadeIn, 1);
        }
    }

    function fadeIn ()
    {
        if (intOpacity < 100)
        {
            intOpacity += 10;
            bcm.setElementOpacity (objMainImage, intOpacity);
            bcm.setElementOpacity (objText, intOpacity);
        }
        else
        {
            clearInterval (intFadeTimer);
            intFadeTimer = false;
        }
    }
}