// VARIABLES
var app = {};
app.songlist = {};
app.meta_information = {};

// Global setup
app.retina_display = 1;
app.songlist.open = false;
app.songlist.cutpointOpen = (50 * app.retina_display);

// Album meta information
app.meta_information.artist = 'Beck';
app.meta_information.album = 'Morning Phase';
app.meta_information.release_year = '2014';
app.meta_information.art = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/127507/album.jpg';

// COMPONENTS AND LAYOUT
// iphone view
iphone = new View ({
  x: 0,
  y: 0,
  width: (320 * app.retina_display),
  height: (568 * app.retina_display)
});
iphone.style.background = '#fff';
iphone.style.overflow = 'hidden';

// status bar view
statusbar = new View ({
  x: iphone.minX,
  y: iphone.minX,
  width: iphone.width,
  height: (iphone.width/16),
  superView: iphone
});
statusbar.style.background = '#000';

// player view
player = new View ({
  x: iphone.minX,
  y: statusbar.maxY,
  width: iphone.width,
  height: (iphone.maxY-statusbar.maxY),
  superView: iphone
});
player.style.background = '#fff';

// cover_art, album_art, gradient_mask
cover_art = new View ({
  x: 0,
  y: 0,
  width: iphone.width,
  height: iphone.width,
  superView: player
});

album_art = new ImageView ({
  image: app.meta_information.art,
  x: 0,
  y: 0,
  width: cover_art.width,
  height: cover_art.height,
  superView: cover_art
});

// load songs graphic first
songs = new ImageView ({
  x: 0,
  y: cover_art.maxY,
  image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/127507/song-list@2x_3.png',
  width: iphone.width,
  height: (620 * app.retina_display)
})

// songlist list view
// height is content added together
songlist = new ScrollView ({
  x: 0,
  y: 0,
  width: player.width,
  height: (songs.height + cover_art.height),
  superView: player
});

songs.superView = songlist;

songlist.style = {
  padding: '0',
  overflow: 'hidden'
}

gradient_cover = new View ({
  x: 0,
  y: 0,
  width: cover_art.width,
  height: cover_art.height,
  superView: songlist
});

gradient_cover.style = {
  boxShadow: 'inset 0 -100px 100px rgba(0,0,0,.5)'
};

album_meta = new View ({
  width: cover_art.width,
  height: (cover_art.height / 3),
  x: 0,
  y: cover_art.maxY - (cover_art.height / 3),
  superView: gradient_cover
})

album_meta.html = app.meta_information.artist + '</br>' +
                  app.meta_information.album + '</br>' +
                  app.meta_information.release_year;

album_meta.style = {
  color: '#fff',
  fontWeight: '300',
  margin: '20px'
}

// BEHAVIOR
// songlist
songlist.draggable = new ui.Draggable(songlist);

songlist.on(Events.DragMove, function() {
  // constrain to vertical drag
  songlist.x = 0;
  // don't allow for dragging below startpoint
  if (songlist.y > 0) {
    songlist.y = 0;
  }
});

songlist.on(Events.DragEnd, function() {
  // calculate height of scroll list and viewport
  var songlist_cutpoint_maxY = (
    cover_art.height + (
      songs.height - player.height
      )
    );
      
  // animate songlist open when moved up a range
  // using around 100 pixels of motion up here
  if (app.songlist.open == false) {
    if (songlist.y < -(app.songlist.cutpointOpen)) {
      songlist.animate({
        properties: {y: -(cover_art.maxY)},
        time: 200
      });
      // set property saying songlist is open
      app.songlist.open = true;
    }
    else {
       songlist.animate({
        properties: {y: 0},
        time: 200
      });     
    }
    return true;
  }
  // animate songlist closed when moved down a range
  // using around 50 pixels of motion down here
  else if (app.songlist.open == true) {
    if (songlist.y > -(cover_art.height-app.songlist.cutpointOpen)) {
      songlist.animate({
        properties: {y: 0},
        time: 300
      });
      // set property saying songlist is open
      app.songlist.open = false;
    }
    // if range is somewhere between 
    else if ((songlist.y < -(cover_art.height))&&(songlist.y > -songlist_cutpoint_maxY)) {
      return true
    }
    else if (songlist.y < -songlist_cutpoint_maxY) {
      songlist.animate({
        properties: {y: -songlist_cutpoint_maxY},
        time: 300
      });
    }
    else {
      songlist.animate({
        properties: {y: -(cover_art.height)},
        time: 300
      });
    }
    return true;
  }
});