var SimpleSlideshowObject = new SimpleSlideshow();
var MultiPageThumbnailAlbumObject = new MultiPageThumbnailAlbum();
var SimpleThumbnailGalleryObject = new SimpleThumbnailGallery();

$DOP(document).ready(function()
{
    $DOP("#jquery_jplayer").jPlayer(
    {
		ready: function()
        {
			$DOP("#jquery_jplayer").jPlayer("setFile", "audio/song.mp3", "audio/song.ogg").jPlayer("play");
		},
		customCssIds: true
	})
	.jPlayer("cssId", "play", "play")
	.jPlayer("cssId", "pause", "pause")
    .jPlayer("onSoundComplete", function(){this.play();});


    $DOP.post('includes/php/menu.php', {}, function(data)
    {
        $DOP('#menu').html(data);
        //$DOP('#menu').css('margin-top', 580-$DOP('#menu').height());
    });

    if ($DOP('#wrapper').height() < $DOP(window).height()) $DOP('#wrapper').css('margin-top', ($DOP(window).height()-$DOP('#wrapper').height())/2);
    $DOP(window).resize(function()
    {
        if ($DOP('#wrapper').height() < $DOP(window).height()) $DOP('#wrapper').css('margin-top', ($DOP(window).height()-$DOP('#wrapper').height())/2);
    });

    if (location.hash == '') displaySlideshow();
    else displayAlbum(location.hash.split('#')[1]);

    $DOP('a', 'li', 'ul', '#menu').click(function()
    {
        displayAlbum(location.hash.split('#')[1]);
    });

    $DOP('img', '#logo').click(function()
    {
        SimpleSlideshowObject.stopSlideshow();
        displaySlideshow();
    });
});

function displaySlideshow()
{
    $DOP('#social').css('margin-top', 594);
    $DOP('#top-loader').html('');
    $DOP('a', 'li', 'ul', '#menu').removeClass('selected');
    $DOP('#contact').removeClass('selected');

    $DOP('#galleries').html('<div id="SimpleSlideshow"></div>');
    $DOP('#galleries').css('margin-left', '70px');

    $DOP.post('includes/com/dop/php/SimpleSlideshow.php', {}, function(data)
    {
        SimpleSlideshowObject.init('1', '#SimpleSlideshow', data, 860, 550);
    });
}

function displayAlbum(id)
{
    $DOP('#social').css('margin-top',  661);
    SimpleSlideshowObject.stopSlideshow();

    $DOP('a', 'li', 'ul', '#menu').removeClass('selected');
    $DOP('#contact').removeClass('selected');
    
    $DOP('#menuAlbum'+id).addClass('selected');    
    $DOP('#galleries').html('<div id="MultiPageThumbnailAlbum"></div><div id="SimpleThumbnailGallery"></div>');
    $DOP('#galleries').css('margin-left', '38px');

    $DOP.post('includes/com/dop/php/MultiPageThumbnailAlbum.php', {id:id}, function(data)
    {
        MultiPageThumbnailAlbumObject.init('1', '#MultiPageThumbnailAlbum', data, 924, 617, 2, 4);
    });
}

function displayAbout()
{
    $DOP('#social').css('margin-top', 594);
    $DOP('#top-loader').html('');
    SimpleSlideshowObject.stopSlideshow();

    $DOP('a', 'li', 'ul', '#menu').removeClass('selected');
    $DOP('#about').removeClass('selected');
    $DOP('#contact').removeClass('selected');
    $DOP('#magazine').removeClass('selected');
    $DOP('#canvas').removeClass('selected');

    $DOP('#about').addClass('selected');
    $DOP('#galleries').html('<div id="contact_page"></div>');
    $DOP('#galleries').css('margin-left', '70px');

    var HTML = '<table class="contact_page_content">';
    HTML += '<tbody>';
    HTML += '<tr>';
    HTML += '<td style="width:31px;">&nbsp;</td>';
    HTML += '<td style="width:245px; vertical-align:top; padding:30px 0 0 0;">';
    HTML += '<img src="images/photo.jpg" alt="" />';
    HTML += '<td style="width:31px;">&nbsp;</td>';
    HTML += '<td style="width:245px; vertical-align:top; padding:30px 0 0 0;">';
    HTML += '<div class="about_box_text">Une sensibilité, un regard, un style différent. Alexandre Abela, créateur du <a href="http://www.magazinechic.com">MAGAZINE CHIC ST BARTH</a> a su se créer une véritable notoriété par son travail auprès des enseignes de luxe et de la mode à St Barthélemy…<br /><br />Né en 1977 à Paris, de parents artistes, Alexandre a été baigné dès sa plus tendre enfance dans un univers rempli de créativité. Il se dirige très tôt vers le milieu de la musique ou il devient directeur artistique pour les labels tel que ScorpioMusic afin d’imaginer et déterminer l’identité visuelle des artistes. Suite à une mission à Saint-Barthélemy, Alexandre décide de poser ses valises et de s’installer définitivement sur l’île pour lancer son magazine et développer son travail en tant que photographe.<br /><br />Il devient rapidement indépendant et inaugure une nouvelle phase en matière de photographie artistique de mode : désinvoltes et pétillantes. Discret mais incroyablement présent, il insuffle une dimension, une identité douce et juste à son travail.<br />Il apportera à votre projet une élégante frivolité dans un langage personnel et contemporain.<br /></div>';
    HTML += '</td>';
    HTML += '<td style="width:40px;">&nbsp;</td>';
    HTML += '<td style="width:245px; vertical-align:top; padding:30px 0 0 0;">';
    HTML += '<div class="about_box_text_us">A certain sensibility, a unique outlook, a different style. Alexandre Abela, founder of the <a href="http://www.magazinechic.com">CHIC ST BARTH MAGAZINE</a>, knew what it took to establish a veritable notoriety via his work within the worlds of luxury and couture in Saint Barthélemy…<br /><br />Born in 1977 in Paris, to parents in the art world, as a young child Alexandre was enveloped in a universe brimming with creativity. Early on he was interested in music and became the artistic director for such labels as ScorpioMusic, where he envisioned and created the visual identity of various artists. Following a project that brought him to Saint Barthélemy, Alexandre decided to unpack his bags and make the island his permanent home, as the perfect launching pad for his magazine and to develop his work as a photographer.<br /><br />His independent nature quickly led him to inaugurate a new definition of artistic fashion photography: nonchalant and witty. Discrete but incredibly present, he infuses his work with a distinct identity.<br />He will add an elegant frivolity, in a language that is both personal and contemporary, to your projects as well.<br /></div>';
    HTML += '<td style="width:31px;">&nbsp;</td>';
    HTML += '</tr>';
    HTML += '</tbody>';
    HTML += '</table>';

    $DOP('#galleries').html('<div id="contact_page">'+HTML+'</div>');
    $DOP('#galleries').css('margin-left', '70px');

    $DOP('#contact_page').stop(true, true).animate({'opacity':'0'}, 0);
    $DOP('#contact_page').stop(true, true).animate({'opacity':'1'}, 1000);
}

function displayCanvas()
{
    $DOP('#social').css('margin-top', 594);
    $DOP('#top-loader').html('');
    SimpleSlideshowObject.stopSlideshow();

    $DOP('a', 'li', 'ul', '#menu').removeClass('selected');
    $DOP('#canvas').removeClass('selected');
    $DOP('#magazine').removeClass('selected');
    $DOP('#about').removeClass('selected');
    $DOP('#contact').removeClass('selected');

    $DOP('#canvas').addClass('selected');
    $DOP('#galleries').html('<div id="contact_page"></div>');
    $DOP('#galleries').css('margin-left', '70px');

    var HTML = '<table class="canvas_page_content">';
    HTML += '<img src="images/canvas.jpg" alt="" />';
    HTML += '<tbody>';
    HTML += '<tr>';
    HTML += '<td style="width:165px; vertical-align:top; padding:20px 0 0 0;">';
    HTML += '<img src="images/sign.jpg" alt="" />';
    HTML += '<td style="width:31px;">&nbsp;</td>';
    HTML += '<td style="vertical-align:top; padding:20px 0 0 0;">';
    HTML += '<div class="about_box_text">All canvas printed PREMIUM ART plexiglass mount, metalic paper, aluminium and wooden backframe.<br><br>Sizes :<br>20" x 30" in<br>24" x 36" in<br>32" x 48" in<br>40" x 60" in<br><br><a href="javascript:displayContact()">Worlwide shipping. Pricing, informations, custom size on request.</a></div>';
    HTML += '</td>';
    HTML += '</tr>';
    HTML += '</tbody>';
    HTML += '</table>';

    $DOP('#galleries').html('<div id="contact_page">'+HTML+'</div>');
    $DOP('#galleries').css('margin-left', '70px');

    $DOP('#contact_page').stop(true, true).animate({'opacity':'0'}, 0);
    $DOP('#contact_page').stop(true, true).animate({'opacity':'1'}, 1000);

}

function displayMagazine()
{
    $DOP('#social').css('margin-top', 594);
    $DOP('#top-loader').html('');
    SimpleSlideshowObject.stopSlideshow();

    $DOP('a', 'li', 'ul', '#menu').removeClass('selected');
    $DOP('#magazine').removeClass('selected');
    $DOP('#about').removeClass('selected');
    $DOP('#contact').removeClass('selected');
    $DOP('#canvas').removeClass('selected');

    $DOP('#magazine').addClass('selected');
    $DOP('#galleries').html('<div id="contact_page"></div>');
    $DOP('#galleries').css('margin-left', '70px');

    var HTML = '<table class="magazine_page_content">';
    HTML += '<tbody>';
    HTML += '<tr>';
    HTML += '<td>';
    HTML += '<div class="magazine_box_text">CHIC is the first magazine exclusively dedicated to the universe of fashion in St. Barthélémy. A platform that is dedicated and adapted to the most prestigious labels, and to luxury business. Fashion shoots organized in the island’s most beautiful locations, shopping pages, English/French editorials (fashion,beauty, lifestyle, Interview, hotels...) <a href="http://www.magazinechic.com">www.magazinechic.com</a></div><br><br><br>';
    HTML += '</td>';
    HTML += '</tr>';
    HTML += '<tr>';
    HTML += '<td valign="top";">';
	HTML += '<div><center><object style="width:650px;height:421px" ><param name="movie" value="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf?mode=embed&amp;layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Fcolor%2Flayout.xml&amp;backgroundColor=transparent&amp;showFlipBtn=true&amp;logo=www.magazinechic.com%2Flogo.png&amp;documentId=101128052624-8ae13bd79a3a451a833e924d2b4400b7&amp;docName=mag_final&amp;username=chicstbarth&amp;loadingInfoText=MAGAZINE%20CHIC%20ST%20BARTH%202011&amp;et=1291207763256&amp;er=19" /><param name="allowfullscreen" value="true"/><param name="menu" value="false"/><embed src="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf" type="application/x-shockwave-flash" allowfullscreen="true" menu="false" style="width:650px;height:421px" flashvars="mode=embed&amp;layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Fcolor%2Flayout.xml&amp;backgroundColor=000000&amp;showFlipBtn=true&amp;logo=www.magazinechic.com%2Flogo.png&amp;documentId=101128052624-8ae13bd79a3a451a833e924d2b4400b7&amp;docName=mag_final&amp;username=chicstbarth&amp;loadingInfoText=MAGAZINE%20CHIC%20ST%20BARTH%202011&amp;et=1291207763256&amp;er=19" wmode="transparent"/></object></center></div>';
    HTML += '</td>';
    HTML += '</tr>';
      HTML += '</table>';

    $DOP('#galleries').html('<div id="contact_page">'+HTML+'</div>');
    $DOP('#galleries').css('margin-left', '70px');

    $DOP('#contact_page').stop(true, true).animate({'opacity':'0'}, 0);
    $DOP('#contact_page').stop(true, true).animate({'opacity':'1'}, 1000);
}

function displayContact()
{
    $DOP('#social').css('margin-top', 594);
    $DOP('#top-loader').html('');
    SimpleSlideshowObject.stopSlideshow();

    $DOP('a', 'li', 'ul', '#menu').removeClass('selected');
    $DOP('#about').removeClass('selected');
    $DOP('#contact').removeClass('selected');
    $DOP('#magazine').removeClass('selected');
    $DOP('#canvas').removeClass('selected');

    $DOP('#contact').addClass('selected');
    $DOP('#galleries').html('<div id="contact_page"></div>');
    $DOP('#galleries').css('margin-left', '70px');

    var HTML = '<table class="contact_page_content">';
    HTML += '<tbody>';
    HTML += '<tr>';
    HTML += '<td style="width:205px;">&nbsp;</td>';
    HTML += '<td style="width:265px;">';
    HTML += '<div class="contact_box">';
    HTML += '<form method="post" action="" onsubmit="return sendEmail()">';
    HTML += '<label class="contact_form" id="name_label" for="name">NAME: *</label><br />';
    HTML += '<div class="contact_form_spacer2"></div>';
    HTML += '<input type="text" id="name" class="contact_form" value="" /><br />';
    HTML += '<div class="contact_form_spacer"></div>';
    HTML += '<label class="contact_form" id="email_label" for="email">EMAIL: *</label><br />';
    HTML += '<div class="contact_form_spacer2"></div>';
    HTML += '<input type="text" id="email" class="contact_form" value="" /><br />';
    HTML += '<div class="contact_form_spacer"></div>';
    HTML += '<label class="contact_form" for="tel">TEL:</label><br />';
    HTML += '<div class="contact_form_spacer2"></div>';
    HTML += '<input type="text" id="tel" class="contact_form" value="" /><br />';
    HTML += '<div class="contact_form_spacer"></div>';
    HTML += '<label class="contact_form" id="message_label" for="message">MESSAGE: *</label><br />';
    HTML += '<div class="contact_form_spacer2"></div>';
    HTML += '<textarea id="message" rows="" cols="" class="contact_form"></textarea><br />';
    HTML += '<div class="contact_form_spacer"></div>';
    HTML += '<input type="submit" id="submit" class="contact_form_submit" value="" />';
    HTML += '</form>';
    HTML += '</div>';
    HTML += '</td>';
    HTML += '<td style="width:225px;">';
    HTML += '<div class="contact_box">';
    HTML += '<div class="contact_box_text">Maison Pedro Greaux,<br />St Jean Carenage,<br />97133 St Barthelemy<br />F.W.I.<br />Tél : (+590) 690 40 21 36</div>';
    HTML += '<div class="contact_box_email"><a href="mailto:contact@alexandreabela.com">contact@alexandreabela.com</a></div>';
    HTML += '</div>';
    HTML += '</td>';
    HTML += '<td style="width:165px;">&nbsp;</td>';
    HTML += '</tr>';
    HTML += '</tbody>';
    HTML += '</table>';

    $DOP('#contact').addClass('selected');
    $DOP('#galleries').html('<div id="contact_page">'+HTML+'</div>');
    $DOP('#galleries').css('margin-left', '70px');
    
    $DOP('#contact_page').stop(true, true).animate({'opacity':'0'}, 0);
    $DOP('#contact_page').stop(true, true).animate({'opacity':'1'}, 1000);
}

function sendEmail()
{
    var ok = true;
    $DOP('#name_label').css('color', '#999999');
    $DOP('#email_label').css('color', '#999999');
    $DOP('#message_label').css('color', '#999999');

    if ($DOP('#name').val() == '')
    {
        ok = false;
        $DOP('#name_label').css('color', '#dc931a');
    }
    if (!validEmail($DOP('#email').val()))
    {
        ok = false;
        $DOP('#email_label').css('color', '#dc931a');
    }
    if ($DOP('#message').val() == '')
    {
        ok = false;
        $DOP('#message_label').css('color', '#dc931a');
    }

    if (ok)
    {
        $DOP.post('includes/php/send-email.php', {name:$DOP('#name').val(), email:$DOP('#email').val(), tel:$DOP('#tel').val(), message:$DOP('#message').val()}, function(data)
        {
            $DOP('#name_label').css('color', '#999999');
            $DOP('#email_label').css('color', '#999999');
            $DOP('#message_label').css('color', '#999999');
            $DOP('#name').val('');
            $DOP('#email').val('');
            $DOP('#tel').val('');
            $DOP('#message').val('');
            alert('Thank you! Your message was sent.')
        });
    }

    return false;
}

function validEmail(email)
{
    var filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i
    if (filter.test(email))
        {return true;}
    return false;
}