/**
 * Initializing the page and setting up event handlers
 */
$(document).ready(function() {
        /**
         * Image switching for mouseover and mouseout events
         */
        $("[name='button']").hover(
            mouseEnterHandler,
            mouseLeaveHandler
        );
        /**
         * Animations for onclick event
         */
        $("[name=button]").click(function() {
            var selected = $(this).attr('num');
            var state = $(this).attr("state");
            //alert(name);
            if(state == 'normal') {
                $(this).unbind('mouseenter mouseleave');
                $(this).attr('state', 'selected');
                showMenuContent(selected);
            }
            else if(state == 'selected') {
                $(this).attr('state', 'normal');
                $(this).hover(
                    mouseEnterHandler,
                    mouseLeaveHandler
                );
                closeMenuContent(selected);
            }
            $(this).attr('src', 'img/design/default/button_'+parseInt(selected)+'_hoover.png');
        });
});

function showMenuContent(selected) {
    menuOpenAnimate(selected);
    switch(parseInt(selected, 10)) {
        case 1:$.get('../programs/get_content/', function(data){
                    var programs = data.getElementsByTagName('program');
                    $.each(programs, function(i, v){
                        $("#menu_content").append(
                            "<div class='program' rel='#program_"+i+"'>\n\
                                <img src='img/program/thumb_"+v.childNodes[2].firstChild.nodeValue+"'/>\n\
                                <p class='name'>"+v.childNodes[1].firstChild.nodeValue+"</p>\n\
                                <p class='date'>"+v.childNodes[5].firstChild.nodeValue+"</p>\n\
                                <img src='img/design/default/line.png'>\n\
                            </div>\n\
                            <div class='apple_overlay' id='program_"+i+"' >\n\
                                <p class='desc'>"+v.childNodes[4].firstChild.nodeValue+"</p>\n\
                            </div>"
                        );
                    });
                    $(function() {
                        $("#menu_content div[rel]").overlay({effect: 'apple'});
                    });
                }); 
            break;
        case 2:$.get('../videos/get_content', function(data){
                    var videos = data.getElementsByTagName('video');
                    $.each(videos, function(i, v){
                        $('#menu_content').append(
                            "<div id='video_"+i+"' class='video'>\n\
                                <p class='name'>"+v.childNodes[1].firstChild.nodeValue+"</p>\n\
                                <iframe width='430' height='271' src='http://www.youtube.com/embed/"+v.childNodes[3].firstChild.nodeValue+"' frameborder='0' allowfullscreen></iframe>\n\
                                <p class='desc'>"+v.childNodes[2].firstChild.nodeValue+"</p>\n\
                            </div>"                        
                        );
                    });
                });
            break;
        case 3:$.getJSON('../pictures/get_content', function(data){
                    var pictures = data;
                    $.each(pictures, function(i, v) {
                        html = "<div class='picture' >";
                        html += "<img src='img/picture/thumb_"+v.Picture.picture+"' rel='#picture_"+i+"' />";
                        html += "</div>";
                        html += "<div class='apple_overlay' id='picture_"+i+"'>";
                        html += "<img height='350' src='img/picture/medium_"+v.Picture.picture+"' style='height: 350px' />";
                        html += "</div>";
                        $('#menu_content').append(html);
                    });
                    $(function() {
                        $("#menu_content img[rel]").overlay({effect: 'apple'});
                    });
                });
            break;
        case 4:$.get('../mixes/get_content', function(data){
                    var mixes = data.getElementsByTagName('mix');
                    $.each(mixes, function(i, v){
                        $('#menu_content').append(
                            "<div class='mix' id='mix_"+i+"'>\n\
                                <p class='desc'>"+v.childNodes[2].firstChild.nodeValue+"</p>\n\
                                <a href='"+v.childNodes[3].firstChild.nodeValue+"'>"+v.childNodes[1].firstChild.nodeValue+"</a>\n\
                            </div>"
                        );
                    });
                }); 
            break;
        case 5:$.get('../static_pages/get_content/top', function(data){
                    var top = data.getElementsByTagName('static_page');
                    $.each(top, function(i,v){
                        $('#menu_content').append(
                            "<div class='static'>"+v.childNodes[2].firstChild.nodeValue+"</div>"
                        );
                    });
                });
            break;
        case 6:$.get('../static_pages/get_content/bio', function(data){
                    var bio = data.getElementsByTagName('static_page');
                    $.each(bio, function(i,v){
                        $('#menu_content').append(
                            "<div class='static'>"+v.childNodes[2].firstChild.nodeValue+"</div>"
                        );
                    });
                }); 
            break;
        case 7:$.get('../static_pages/get_content/kapcs', function(data){
                    var kapcs = data.getElementsByTagName('static_page');
                    $.each(kapcs, function(i,v){
                        $('#menu_content').append(
                            "<div class='static'>"+v.childNodes[2].firstChild.nodeValue+"</div>"
                        );
                    });
                });
            break;
    }        
}

function closeMenuContent(selected) {
    menuCloseAnimate(selected);
}

function mouseEnterHandler() {
    $(this).attr('src','img/design/default/button_'+$(this).attr('num')+'_hoover.png');
}

function mouseLeaveHandler() {
    $(this).attr('src', 'img/design/default/button_'+$(this).attr('num')+'.png');
}

function menuOpenAnimate(selected) {
    var menuTop = $('div.menu_top');
    var contentType;
    if(parseInt(selected, 10) == 6 || parseInt(selected, 10) == 7) contentType = 'wide';
    else contentType = 'narrow';
    
    for(var i=1; i<=7; i++) {
        if(i != selected) {
            if( i == 6 || i == 7) {
                $("div#button_"+parseInt(i)).stop().animate({
                        height: "toggle",
                        opacity: "toggle"
                    }, 1500
            );
            } else {
                $("div#button_"+parseInt(i)).stop().animate({
                        width: "toggle",
                        opacity: "toggle"
                    }, 1500
                );
            }                    
        }
    }
    
    if(contentType == 'narrow') {
        menuContent = "<div id='menu_content' class='narrow_menu_content jspScrollable'></div>";
        var _width = '460px';
    } else if(contentType == 'wide') {
        menuContent = "<div id='menu_content' class='wide_menu_content'></div>";
        var _width = '454px';
    }
    menuTop.append(menuContent);
    $('#menu_content').animate({
        width: _width,
        opacity: 1
    },1800, function() {
        $('#menu_content').jScrollPane({
 			showArrows: true,
            verticalDragMinHeight: 40,
			verticalDragMaxHeight: 40
        });
    });
    
}
function menuCloseAnimate(selected) {
    $('div#menu_content').animate({
        width: '0px',
        opacity: 0
    },1200, function() {
        $('div#menu_content').remove();
    })
    
    for(var i=1; i<=7; i++) {
        if(i != selected) {
            if( i == 6 || i == 7) {
                $("div#button_"+parseInt(i)).animate({
                        height: "toggle",
                        opacity: "toggle"
                    }, 1500
                );
            } else {
                $("div#button_"+parseInt(i)).animate({
                        width: "toggle",
                        opacity: "toggle"
                    }, 1500
                );
            }                    
        }
    }
}