var config = {  "pic_fadetime": 3000,
                "pic_fadetimes": 3, //todo
                "pic_blacktime": 250,
                "info_fadetime": 2000,
                "info_fadetimes": 2, //todo
                "delay": 8000,
                "next_image_poll_time": 500,
                "element_id": "picture_frame",
                "play_element_id": "play",
                "pause_element_id": "pause"};

var data = [['Jussi_TwoSeven.jpg',
  'On & Off the Wall -exhibition<br> Make Your Mark gallery, Helsinki, 2011',
  '218cm x 153cm, spray can & acrylic on Mdf '],
 ['Jussi_TwoSeven_1.jpg',
  'On & Off the Wall -exhibition<br> Make Your Mark gallery, Helsinki, 2011',
  '170cm x 110cm, spray can & acrylic on Mdf '],
 ['Jussi_TwoSeven_2.jpg',
  'On & Off the Wall -exhibition<br> Make Your Mark gallery, Helsinki, 2011',
  '210cm x 152cm, spray can & acrylic on Mdf '],
 ['Jussi_TwoSeven_3.jpg',
  'On & Off the Wall -exhibition<br> Make Your Mark gallery, Helsinki, 2011',
  '123cm x 105cm, spray can & acrylic on Mdf '],
 ['Jussi_TwoSeven_4.jpg',
  'On & Off the Wall -exhibition<br> Make Your Mark gallery, Helsinki, 2011',
  '90cm x 150cm, spray can & acrylic on Mdf '],
 ['Jussi_TwoSeven_5.jpg',
  'On & Off the Wall -exhibition<br> Make Your Mark gallery, Helsinki, 2011',
  '186cm x 174cm, spray can & acrylic on Mdf '],
 ['Jussi_TwoSeven_6.jpg',
  'On & Off the Wall -exhibition<br> Make Your Mark gallery, Helsinki, 2011',
  '170cm x 110cm, spray can & acrylic on Mdf '],
 ['Jussi_TwoSeven_7.jpg',
  'On & Off the Wall -exhibition<br> Make Your Mark gallery, Helsinki, 2011',
  '130cm x 90cm, spray can & acrylic on Mdf '],
 ['Jussi_TwoSeven_8.jpg', 'Club Bassment, Helsinki, 2011 ', ''],
 ['Jussi_TwoSeven_9.jpg', 'Suvilahti, Helsinki, 2011 ', ''],
 ['Jussi_TwoSeven_10.jpg', 'Paris, 2011 ', ''],
 ['Jussi_TwoSeven_11.jpg', 'Kalasatama, Helsinki, 2011 ', ''],
 ['Jussi_TwoSeven_12.jpg', 'Kalasatama, Helsinki, 2011 ', ''],
 ['Jussi_TwoSeven_13.jpg', 'Sörnäinen, Helsinki, 2011 ', ''],
 ['Jussi_TwoSeven_14.jpg', 'Kyläsaari, Helsinki, 2011 ', ''],
 ['Jussi_TwoSeven_15.jpg', 'Kyläsaari, Helsinki, 2011 ', ''],
 ['Jussi_TwoSeven_16.jpg', 'Vantaa, 2011 ', ''],
 ['Jussi_TwoSeven_17.jpg', 'Kyläsaari, Helsinki, 2010 ', ''],
 ['Jussi_TwoSeven_18.jpg', 'Helsinki, 2010 ', ''],
 ['Jussi_TwoSeven_19.jpg', 'Suvilahti, Helsinki, 2010 ', '']];

var PictureFrame = function (element, data, config) {
        var current_picture, pictures_length, next_image_ready, info_elem, img_elem, name_elem, medium_elem, separator_elem, play_elem, pause_elem, timer, playing;
        current_picture = 0;
        pictures_length = data.length;
        next_image_ready = false;
        info_elem = element.children.namedItem("info");
        img_elem = element.children.namedItem("picture");
        name_elem = info_elem.children.namedItem("name");
        medium_elem = info_elem.children.namedItem("medium");
        separator_elem = info_elem.children.namedItem("separator");
        play_elem = document.getElementById(config.play_element_id);
        pause_elem = document.getElementById(config.pause_element_id);
        timer = null;
        playing = false;

        var load_next_image = function () {
                next_image_ready = false;
                imgobj = new Image();
                imgobj.onload = onimgload;
                imgobj.src = data[(current_picture+1)%pictures_length][0];
        }

        var onimgload = function () {
                next_image_ready = true;
        }

        var fadeout = function () {
                if(next_image_ready){
                        element.style.opacity = 0;
                        name_elem.style.opacity = 0;
                        medium_elem.style.opacity = 0;
                        separator_elem.style.opacity = 0;
                        timer = setTimeout(switchpic, config.pic_fadetime); 
                }
                else{
                        timer = setTimeout(fadeout, 500);
                }
        }

        var switchpic = function () { 
                current_picture = ++current_picture%pictures_length;
                img_elem.src = data[current_picture][0];
                name_elem.innerHTML = data[current_picture][1];
                medium_elem.innerHTML = data[current_picture][2];                
                timer = setTimeout(fadein, config.pic_blacktime);
                load_next_image();
        }

        var fadein = function () {
                element.style.opacity = 1;
                timer = setTimeout(fadeout, config.delay+config.pic_fadetime);
        }

        var pause = function () {
                if(playing){
                        playing = false;
                        clearTimeout(timer);
                        name_elem.style.opacity = 1;
                        if(medium_elem.innerHTML != ""){
                                medium_elem.style.opacity = 1;
                                separator_elem.style.opacity = 1;
                        }
                        element.style.opacity = 1;
                        play_elem.style.opacity = 0.65;
                        pause_elem.style.opacity = 1;
                }
        }

        var play = function () {
                if(!playing){
                        playing = true;
                        pause_elem.style.opacity = 0.65;
                        play_elem.style.opacity = 1;
                        fadeout();
                }
        }

        load_next_image();

        return {"play":play,
                "pause":pause}
}

var init = function () {
        var pf_element = document.getElementById(config.element_id);
        var pf = new PictureFrame(pf_element, data, config);

        var play_element = document.getElementById(config.play_element_id);
        play_element.onclick = pf.play;
        
        var pause_element = document.getElementById(config.pause_element_id);
        pause_element.onclick = pf.pause;

}

window.onload = init;